How to use
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="./assets/vendor/fullcalendar/main.min.css">
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="./assets/vendor/fullcalendar/main.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
Copy-paste the init function under JS Plugins Init. , before the closing </body> tag, to enable it.
<script>
(function() {
// INITIALIZATION OF FULLCALENDAR
// =======================================================
HSCore.components.HSFullCalendar.init(selector, options);
});
</script>
Basic example
<!-- Fullcalendar-->
<div class="js-fullcalendar fullcalendar-custom"
data-hs-fullscreen-options='{
"initialDate": "2020-09-10"
}'>
</div>
<!-- End Fullcalendar -->
Drag-n-drop events
Drag these onto the calendar:
-
Open a new task on Jira
-
Send weekly invoice to John
-
Shoot a message to Christina on Slack
<h4>Drag these onto the calendar:</h4>
<!-- External Events -->
<ul id="external-events" class="fullcalendar-custom list-unstyled list-unstyled-py-2 w-sm-50 mb-5">
<li>
<!-- Event -->
<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event fc-daygrid-inline-block-event'
data-event='{
"title": "Open a new task on Jira",
"image": "../assets/svg/brands/jira-icon.svg",
"className": ""
}'>
<div class='fc-event-title'>
<div class='d-flex align-items-center'>
<img class="avatar avatar-xss me-2" src="../assets/svg/brands/jira-icon.svg" alt="Image Description">
<span>Open a new task on Jira</span>
</div>
</div>
</div>
<!-- End Event -->
</li>
<li>
<!-- Event -->
<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event fc-daygrid-inline-block-event fc-event-success'
data-event='{
"title": "Send weekly invoice to John",
"image": "../assets/svg/brands/excel-icon.svg",
"className": "fc-event-success"
}'>
<div class='fc-event-title'>
<div class='d-flex align-items-center'>
<img class="avatar avatar-xss me-2" src="../assets/svg/brands/excel-icon.svg" alt="Image Description">
<span>Send weekly invoice to John</span>
</div>
</div>
</div>
<!-- End Event -->
</li>
<li>
<!-- Event -->
<div class='fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event fc-daygrid-inline-block-event'
data-event='{
"title": "Shoot a message to Christina on Slack",
"image": "../assets/svg/brands/slack-icon.svg",
"className": ""
}'
>
<div class='fc-event-title'>
<div class='d-flex align-items-center'>
<img class="avatar avatar-xss me-2" src="../assets/svg/brands/slack-icon.svg" alt="Image Description">
<span>Shoot a message to Christina on Slack</span>
</div>
</div>
</div>
<!-- End Event -->
</li>
</ul>
<!-- End External Events -->
<!-- Fullcalendar -->
<div id="js-fullcalendar-draggable" class="fullcalendar-custom"></div>
<!-- End Fullcalendar -->
<script>
// ADD DRAGGABLE CLASS FOR CALENDAR
// =======================================================
const Draggable = FullCalendar.Draggable
new Draggable(document.querySelector('#external-events'), {
itemSelector: '.fc-event'
})
(function () {
const eventContent = function(data) {
return `
<div class="d-flex align-items-center px-2">
${data && data.extendedProps.image ? `<img class="avatar avatar-xss" src="${data.extendedProps.image}" alt="Image Description">` : ''}
<span class="fc-event-title fc-sticky">${data.title}</span>
</div>
`;
};
HSCore.components.HSFullCalendar.init('#js-fullcalendar-draggable', {
events: [
{
"title": "English Lesson",
"start": "2020-09-03T01:00:00",
"end": "2020-09-03T02:30:00"
},
{
"title": "Spanish Lesson",
"start": "2020-09-03T04:00:00",
"end": "2020-09-03T05:30:00"
},
{
"title": "Javascript Lesson",
"start": "2020-09-14T01:00:00",
"end": "2020-09-16T02:30:00"
},
{
"title": "PHP Lesson",
"start": "2020-09-06T04:00:00",
"end": "2020-09-09T05:30:00"
}
],
initialDate: "2020-09-10",
headerToolbar: {
left: "prev,next today",
center: "title",
right: "",
},
editable: true,
eventContent({event}) {
return {
html: eventContent(event),
}
},
drop({draggedEl}) {
draggedEl.remove();
}
})
})()
</script>
Date Clicking & Selecting
This example uses Datepicker libraries.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#addEventModal">
<i class="bi bi-plus"></i> Add event </button>
<!-- End Button trigger modal -->
<div id="js-fullcalendar-editable" class="fullcalendar-custom"></div>
<!-- End Fullcalendar -->
<!-- Modal -->
<div class="modal fade" id="addEventModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-close">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- End Header -->
<!-- Body -->
<div class="modal-body">
<div class="mb-4">
<input type="text" id="eventTitle" class="form-control form-control-lg form-control-flush" placeholder="Add title and time" aria-label="Add title and time">
</div>
<!-- Media -->
<div class="d-flex mb-4">
<i class="bi-calendar-week nav-icon mt-2 me-2"></i>
<div class="flex-grow-1">
<label for="eventDateRangeLabel" class="visually-hidden">Date </label>
<!-- Flatpickr -->
<input type="text" id="eventDateRangeLabel" class="js-flatpickr form-control flatpickr-custom mb-2" placeholder="Select dates" data-hs-flatpickr-options='{
"dateFormat": "m/d/Y",
"mode": "range",
"minDate": "12/01/2020"
}'>
<!-- End Flatpickr -->
<label for="eventRepeatLabel" class="text-body me-2 mb-0">Repeat: </label>
<!-- Select -->
<div class="tom-select-custom">
<select id="eventRepeatLabel" class="js-select form-select"
data-hs-tom-select-options='{
"hideSearch": true,
"placeholder": "Add guestse"
}'>
<option value="everyday" selected>Everyday</option>
<option value="weekdays">Weekdays</option>
<option value="never">Never</option>
</select>
</div>
<!-- End Select -->
</div>
</div>
<!-- End Media -->
<!-- Media -->
<div class="d-flex mb-4">
<i class="bi-people nav-icon mt-2 me-2"></i>
<div class="flex-grow-1">
<label for="eventGuestsLabel" class="visually-hidden">Add guests </label>
<!-- Select -->
<div class="tom-select-custom">
<select id="eventGuestsLabel" class="form-select" multiple data-hs-tom-select-options='{
"placeholder": "Add guestse"
}'></select>
</div>
<!-- End Select -->
</div>
</div>
<!-- End Media -->
<!-- Media -->
<div class="d-flex mb-4">
<i class="bi-geo-alt nav-icon mt-2 me-2"></i>
<div class="flex-grow-1">
<label for="eventLocationLabel" class="visually-hidden">Add location </label>
<input type="text" class="form-control form-control-light form-control-borderless" id="eventLocationLabel" placeholder="Add location" aria-label="Add location">
</div>
</div>
<!-- End Media -->
<!-- Media -->
<div class="d-flex mb-4">
<i class="bi-text-left nav-icon mt-2 me-2"></i>
<div class="flex-grow-1">
<label for="eventDescriptionLabel" class="visually-hidden">Add description </label>
<textarea id="eventDescriptionLabel" class="form-control form-control-light form-control-borderless" placeholder="Add description"></textarea>
</div>
</div>
<!-- End Media -->
<div class="row">
<div class="col">
<!-- Media -->
<a class="d-flex align-items-center" href="../user-profile.html">
<div class="avatar avatar-xs avatar-circle me-3">
<img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
</div>
<div class="flex-grow-1">
<span class="d-block fs6 text-body">Assignee:</span>
<span class="h5 text-inherit">Amanda Harvey</span>
</div>
</a>
<!-- End Media -->
</div>
<div class="col-auto">
<label for="eventColorLabel" class="visually-hidden">Event color </label>
<!-- Select -->
<div class="tom-select-custom">
<select id="eventColorLabel" class="js-select form-select" data-hs-tom-select-options='{
"hideSearch": true,
"width": "10rem"
}'>
<option value="rgba(55,125,255,.1)" selected data-option-template='<div><span class="legend-indicator bg-primary"></span>Primary</div>'>Primary </option>
<option value="rgba(0,201,167,.1)" data-option-template='<div><span class="legend-indicator bg-success"></span>Green</div>'>Green </option>
<option value="rgba(237,76,120,.1)" data-option-template='<div><span class="legend-indicator bg-danger"></span>Red</div>'>Red </option>
<option value="rgba(245,202,153,.1)" data-option-template='<div><span class="legend-indicator bg-warning"></span>Yellow</div>'>Yellow </option>
<option value="rgba(0,201,219,1)" data-option-template='<div><span class="legend-indicator bg-info"></span>Cyan</div>'>Cyan </option>
<option value="rgba(19,33,68,1)" data-option-template='<div><span class="legend-indicator bg-dark"></span>Navy</div>'>Navy </option>
</select>
</div>
</div>
</div>
</div>
<!-- End Body -->
<!-- Footer -->
<div class="modal-footer">
<button type="button" id="discardFormt" class="btn btn-white" data-dismiss="modal">Discard </button>
<button type="button" id="processEvent" class="btn btn-primary">Create event </button>
</div>
<!-- End Footer -->
</div>
</div>
</div>
<!-- End Modal -->
<script src="../assets/vendor/daterangepicker/moment.min.js"></script>
<script src="../assets/vendor/flatpickr/dist/flatpickr.min.js"></script>
<script>
(function () {
let $popover;
let $fullcalendarEditable;
let $guestsField;
const popoverContent = function(data) {
return `
<ul class="list-unstyled">
<li class="d-flex">Start: ${moment(data.event.start).format('YYYY-MM-DD hh:mm')}</li>
<li class="d-flex">End: ${moment(data.event.end).format('YYYY-MM-DD hh:mm')}</li>
<li class="d-flex">Repeat: ${data.event.extendedProps.repeatField}</li>
<li class="d-flex">Location: ${data.event.extendedProps.eventLocationLabel}</li>
<li class="d-flex">Description: ${data.event.extendedProps.eventDescriptionLabel}</li>
<li>Guests: ${getAvatars(data.event.extendedProps.guestsField)}</li>
</ul>
<a id="modal-invoker-${data.event.id}" href="javascript:;" class="btn btn-soft-primary btn-sm">Edit</a>
`
};
const $titleField = document.querySelector('#eventTitle');
const $repeatField = document.querySelector('#eventRepeatLabel');
const $eventDescriptionLabel = document.querySelector('#eventDescriptionLabel');
const $eventLocationLabel = document.querySelector('#eventLocationLabel');
const $eventColorLabel = document.querySelector('#eventColorLabel');
const $eventGuestsLabel = document.querySelector('#eventGuestsLabel');
let editableEvent = {};
const $processEvent = document.querySelector('#processEvent');
const $addEventModal = document.querySelector('#addEventModal');
const addEventModal = new bootstrap.Modal($addEventModal);
// INITIALIZATION OF FLATPICKR
// =======================================================
HSCore.components.HSFlatpickr.init('#eventDateRangeLabel');
const eventDateRange = HSCore.components.HSFlatpickr.getItem('eventDateRangeLabel')
HSCore.components.HSTomSelect.init('.js-select')
HSCore.components.HSTomSelect.init('#eventGuestsLabel', {
valueField: 'id',
create: false,
options: [
{
id: 1,
"value": "Amanda Harvey",
"src": "../assets/img/160x160/img10.jpg"
},{
id: 2,
"value": "David Harrison",
"src": "../assets/img/160x160/img3.jpg"
}, {
id: 3,
"value": "Finch Hoot",
"src": "../assets/img/160x160/img5.jpg"
}, {
id: 4,
"value": "Ella Lauda",
"src": "../assets/img/160x160/img9.jpg"
}
],
render: {
option: function(data, escape) {
return `<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="avatar avatar-sm avatar-circle">
<img class="avatar-img" src="${data.src}" alt="Image Description">
</div>
</div>
<div class="flex-grow-1 ms-3">
<h5 class="text-inherit mb-0">${data.value}</h5>
</div>
</div>`
},
item: function(data, escape) {
return '<div title="' + data.src + '">' + data.value + '</div>';
}
}
})
$guestsField = HSCore.components.HSTomSelect.getItem('eventGuestsLabel');
// INITIALIZATION OF FULL CALENDAR
// =======================================================
HSCore.components.HSFullCalendar.init('#js-fullcalendar-editable', {
events: [
{
id: 1,
title: "English Lesson",
start: "2020-12-03T01:00:00",
end: "2020-12-03T02:30:00",
color: "rgba(237,76,120,.1)",
eventDescriptionLabel: "",
eventLocationLabel: "",
repeatField: "everyday",
guestsField: []
},
{
id: 2,
title: "Spanish Lesson",
start: "2020-12-03T04:00:00",
end: "2020-12-03T05:30:00",
color: "rgba(55,125,255,.1)",
eventDescriptionLabel: "",
eventLocationLabel: "",
repeatField: "everyday",
guestsField: []
},
{
id: 3,
title: "Javascript Lesson",
start: "2020-12-14T01:00:00",
end: "2020-12-16T02:30:00",
color: "rgba(237,76,120,.1)",
eventDescriptionLabel: "",
eventLocationLabel: "",
repeatField: "everyday",
guestsField: []
},
{
id: 4,
title: "PHP Lesson",
start: "2020-12-06T04:00:00",
end: "2020-12-09T05:30:00",
color: "rgba(55,125,255,.1)",
eventDescriptionLabel: "",
eventLocationLabel: "",
repeatField: "everyday",
guestsField: []
}
],
initialDate: "2020-12-10",
headerToolbar: {
left: "prev,next today",
center: "title",
right: ""
},
selectable: true,
editable: true,
select: function (date) {
prepareData('', date.startStr, date.endStr);
},
eventClick: function (event) {
const _popoverContent = popoverContent(event);
if ($popover && $popover._element) {
$popover.dispose();
}
// Open Popover
$popover = new bootstrap.Popover(event.el, {
html: true,
content: _popoverContent,
template: `
<div class="popover fullcalendar-event-popover" role="tooltip">
<div class="arrow"></div>
<h3 class="popover-header"></h3>
<div class="popover-body"></div>
</div>
`,
});
$popover.show();
// Open Modal For Editing
event.el.addEventListener('shown.bs.popover', function () {
const $invoker = document.querySelector(`#modal-invoker-${event.event.id}`);
$invoker.addEventListener('click', function () {
if ($popover && $popover._element) {
$popover.dispose();
}
prepareData(
event.event.title,
event.event.start,
event.event.end,
event.event
);
})
})
},
});
setTimeout(function() {
$fullcalendarEditable = HSCore.components.HSFullCalendar.getItem('js-fullcalendar-editable');
});
// Events
document.addEventListener('click', function (e) {
if (
(e.target && e.target.id === 'closePopover' && $popover && $popover._element)
|| (e.target && !e.target.closest('.fc-event') && !e.target.closest('.popover') && $popover && $popover._element)
) {
$popover.dispose();
}
});
document.addEventListener('scroll', function () {
if ($popover && $popover._element) {
$popover.dispose();
}
});
$processEvent.addEventListener('click', function () {
const date = eventDateRange.selectedDates;
if (!Object.keys(editableEvent).length) {
$fullcalendarEditable.addEvent({
id: new Date().getTime(),
title: $titleField.value || '(No title)',
repeatField: $repeatField.value,
guestsField: $guestsField.getValue().map((id) => {
return Object.values($guestsField.options).filter(member => parseInt(member.id) === parseInt(id))[0]
}),
eventDescriptionLabel: $eventDescriptionLabel.value,
eventLocationLabel: $eventLocationLabel.value,
start: moment(date[0]).format('YYYY-MM-DD'),
end: date.length > 1 ? moment(date[1]).format('YYYY-MM-DD') : moment(date[0]).format('YYYY-MM-DD'),
color: $eventColorLabel.value,
});
} else {
editableEvent.setProp('title', $titleField.value);
editableEvent.setExtendedProp('repeatField', $repeatField.getValue());
editableEvent.setExtendedProp('guestsField', $guestsField.getValue().map((id) => {
return Object.values($guestsField.options).filter(member => parseInt(member.id) === parseInt(id))[0]
}));
editableEvent.setExtendedProp('eventDescriptionLabel', $eventDescriptionLabel.value);
editableEvent.setExtendedProp('eventLocationLabel', $eventLocationLabel.value);
editableEvent.setProp('color', $eventColorLabel.getValue());
editableEvent.setStart(moment(date[0]).format('YYYY-MM-DD'));
editableEvent.setEnd(date.length > 1 ? moment(date[1]).format('YYYY-MM-DD') : moment(date[0]).format('YYYY-MM-DD'));
}
addEventModal.hide();
})
$addEventModal.addEventListener('show.bs.modal', function () {
clearForm();
});
// Helpers
function triggerEvent(el, evt) {
const newEvt = document.createEvent('HTMLEvents');
newEvt.initEvent(evt, false, true);
el.dispatchEvent(newEvt);
}
function prepareData(title, start, end, event = {}) {
addEventModal.show();
$processEvent.textContent = 'Save';
$titleField.value = title;
eventDateRange.setDate([moment(start).format('MM/DD/YYYY'), moment(end).format('MM/DD/YYYY')])
}
function getAvatar(data) {
return `<img class="avatar-img" src="${data.src.toLowerCase()}" alt="${data.value}" />`;
}
function getAvatars(members) {
const $list = document.createElement('div');
$list.classList.add(
'avatar-group',
'avatar-group-sm',
'mb-1'
);
for (let i = 0; i < members.length; i += 1) {
const $item = document.createElement('span');
$item.classList.add(
'avatar',
'avatar-circle'
);
$item.innerHTML = `
${getAvatar(members[i])}
`;
$list.appendChild($item);
}
return members.length > 0 ? $list.outerHTML : false
}
function clearForm() {
$titleField.value = '';
$eventDescriptionLabel.value = '';
$eventLocationLabel.value = '';
$repeatField.value = 'everyday';
$eventColorLabel.value = 'rgba(55,125,255,.1)';
editableEvent = {};
$guestsField.clear();
triggerEvent($repeatField, 'change');
triggerEvent($eventColorLabel, 'change');
$processEvent.textContent = 'Create Event';
}
})();
</script>
With search
<!-- Input Group -->
<div class="input-group input-group-merge input-group-flush mb-4">
<div class="input-group-prepend input-group-text">
<i class="bi-search"></i>
</div>
<input id="filter-by-title" type="search" class="form-control" placeholder="Search by title" aria-label="Search by title">
</div>
<!-- End Input Group -->
<div id="js-fullcalendar-with-search" class="fullcalendar-custom"></div>
<script>
(function () {
HSCore.components.HSFullCalendar.init('#js-fullcalendar-with-search', {
events: [
{
"title": "English Lesson",
"start": "2020-09-03T01:00:00",
"end": "2020-09-03T02:30:00"
},
{
"title": "Spanish Lesson",
"start": "2020-09-03T04:00:00",
"end": "2020-09-03T05:30:00"
},
{
"title": "Javascript Lesson",
"start": "2020-09-14T01:00:00",
"end": "2020-09-16T02:30:00"
},
{
"title": "PHP Lesson",
"start": "2020-09-06T04:00:00",
"end": "2020-09-09T05:30:00"
}
],
initialDate: "2020-09-10",
headerToolbar: {
left: "prev,next today",
center: "title",
right: ""
},
editable: true,
})
const filterSearchExample = new HSFullcalendarFilter(HSCore.components.HSFullCalendar.getItem('js-fullcalendar-with-search'))
filterSearchExample.addFilter('byTitle', function (event) {
return event.title.toLowerCase().indexOf($('#filter-by-title').val().toLowerCase()) !== -1
})
$('#filter-by-title').on('input', function () {
filterSearchExample.filter()
})
filterSearchExample.filter()
})();
</script>
With filters
<!-- Form Check -->
<div class="form-check form-check-inline">
<input type="checkbox" id="customInlineCheck1" class="form-check-input" value="1" checked>
<label class="form-check-label" for="customInlineCheck1">category 1 </label>
</div>
<!-- End Form Check -->
<!-- Form Check -->
<div class="form-check form-check-inline">
<input type="checkbox" id="customInlineCheck2" class="form-check-input indeterminate-checkbox" value="2" checked>
<label class="form-check-label" for="customInlineCheck2">category 2 </label>
</div>
<!-- End Form Check -->
<!-- Form Check -->
<div class="form-check form-check-inline">
<input type="checkbox" id="customInlineCheck3" class="form-check-input" value="3" checked>
<label class="form-check-label" for="customInlineCheck3">category 3 </label>
</div>
<!-- End Form Check -->
<div id="js-fullcalendar-with-filters" class="fullcalendar-custom"></div>
<script>
(function () {
HSCore.components.HSFullCalendar.init('#js-fullcalendar-with-filters', {
events: [
{
"title": "English Lesson",
"start": "2020-09-03T01:00:00",
"end": "2020-09-03T02:30:00",
category_id: 1
},
{
"title": "Spanish Lesson",
"start": "2020-09-03T04:00:00",
"end": "2020-09-03T05:30:00",
category_id: 3
},
{
"title": "Javascript Lesson",
"start": "2020-09-14T01:00:00",
"end": "2020-09-16T02:30:00",
category_id: 2
},
{
"title": "PHP Lesson",
"start": "2020-09-06T04:00:00",
"end": "2020-09-09T05:30:00",
category_id: 1
}
],
initialDate: "2020-09-10",
headerToolbar: {
left: "prev,next today",
center: "title",
right: ""
},
editable: true,
})
const filterCheckboxExample = new HSFullcalendarFilter(HSCore.components.HSFullCalendar.getItem('js-fullcalendar-with-filters'))
filterCheckboxExample.addFilter('byCategory', function (event) {
const selectedCategories = $('[data-filter] input:checked')
if (!selectedCategories.length) return false
let show = false
selectedCategories.each(key => {
if (event.extendedProps.category_id == $($(selectedCategories)[key]).val()) {
show = true
return false
}
})
return show
})
$('[data-filter]').on('change', function () {
filterCheckboxExample.filter()
})
filterCheckboxExample.filter()
})();
</script>
Header with Tom Select
This example uses tom select library.
<div id="js-fullcalendar-tom-select" class="fullcalendar-custom"></div>
<script>
(function () {
HSCore.components.HSFullCalendar.init('#js-fullcalendar-tom-select', {
initialDate: "2020-09-10",
headerToolbar: {
left: "prev,next today",
center: "title",
right: ""
},
editable: true,
events: [
{
"title": "English Lesson",
"start": "2020-09-03T01:00:00",
"end": "2020-09-03T02:30:00"
},
{
"title": "Spanish Lesson",
"start": "2020-09-03T04:00:00",
"end": "2020-09-03T05:30:00"
},
{
"title": "Javascript Lesson",
"start": "2020-09-14T01:00:00",
"end": "2020-09-16T02:30:00"
},
{
"title": "PHP Lesson",
"start": "2020-09-06T04:00:00",
"end": "2020-09-09T05:30:00"
}
]
})
// APPEND SELECT CONSTROL IN TOOLBAR TO CHANGE CALENDAR VIEW
// =======================================================
const $select = document.createElement('div')
$select.innerHTML = "<select id=\"changeView\">" +
"<option value='dayGridMonth'>Month</option>" +
"<option value='dayGridWeek'>Week</option>" +
"<option value='dayGridDay'>Day</option>" +
"</select>"
document.querySelector('#js-fullcalendar-tom-select .fc-toolbar-chunk:last-child').appendChild($select)
const fullcalendarWithSelect = HSCore.components.HSFullCalendar.getItem('js-fullcalendar-tom-select')
// INITIALIZATION OF SELECT
// =======================================================
HSCore.components.HSTomSelect.init('#changeView', {
hideSearch: true
})
const selectInstance = HSCore.components.HSTomSelect.getItem('changeView')
selectInstance.on('change', (val) => {
fullcalendarWithSelect.changeView(val)
})
})()
</script>
Time Grid
<div id="js-fullcalendar-custom-render" class="fullcalendar-custom"></div>
<script>
(function () {
const $eventTimeGridModal = document.querySelector('#eventTimeGridModal');
const eventContent = function(data) {
return `
<div class="d-flex fc-custom-event align-items-center p-2">
<span class="icon icon-primary me-3">
<i class="${data.event._def.extendedProps.icon}"></i>
</span>
<div class="flex-grow-1">
<h4 class="mb-1">${data.event.title}</h4>
<span class="text-body fw-semibold">${data.timeText}</span>
</div>
<div class="avatar-group avatar-group-sm ms-auto">
<span class="avatar avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
</span>
<span class="avatar avatar-dark avatar-circle">
<span class="avatar-initials">A</span>
</span>
<span class="avatar avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
</span>
<span class="avatar avatar-primary avatar-circle">
<span class="avatar-initials">2+</span>
</span>
</div>
</div>
`;
};
HSCore.components.HSFullCalendar.init('#js-fullcalendar-custom-render', {
events: [
{
"title": "SOLID in JavaScript Lesson",
"start": "2020-09-03T07:00:00",
"end": "2020-09-03T08:30:00",
icon: "bi-tv"
},
{
"title": "Vue Patterns",
"start": "2020-09-03T11:00:00",
"end": "2020-09-03T12:30:00",
icon: "bi-tv"
},
],
initialDate: "2020-09-03",
initialView: "timeGrid",
editable: true,
eventClick: function () {
$eventTimeGridModal.show();
},
eventContent: function (evt) {
return {
html: eventContent(evt),
}
},
});
})();
</script>
Custom Header
This example uses tom select library.
<div class="row align-items-sm-center mb-4">
<div class="col mb-2 mb-sm-0 me-2">
<div class="d-sm-flex align-items-sm-center">
<button type="button" class="btn btn-white me-3" data-bs-toggle="tooltip" data-placement="top" title="" data-fc-today>Today </button>
<button type="button" class="btn btn-icon btn-sm btn-ghost-secondary btn-no-focus rounded-circle me-1" data-fc-prev-month data-bs-toggle="tooltip" data-placement="top" title="Previous month">
<i class="bi bi-chevron-left"></i>
</button>
<button type="button" class="btn btn-icon btn-sm btn-ghost-secondary btn-no-focus rounded-circle ms-1" data-fc-next-month data-bs-toggle="tooltip" data-placement="top" title="Next month">
<i class="bi bi-chevron-right"></i>
</button>
<div class="ms-3">
<h4 class="h3 mb-0" data-fc-title></h4>
</div>
</div>
</div>
<!-- End Col -->
<div class="col-auto">
<!-- Select -->
<div class="tom-select-custom">
<select id="customHeaderSelect" class="form-select" size="1" style="opacity: 0;"
data-fc-grid-view data-hs-tom-select-options='{
"hideSearch": true,
"width": "10rem"
}'>
<option value="dayGridMonth">Month</option>
<option value="dayGridWeek">Week</option>
<option value="dayGridDay">Day</option>
</select>
</div>
<!-- End Select -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<!-- FullCalendar -->
<div id="js-fullcalendar-custom-header" class="fullcalendar-custom"></div>
<!-- End FullCalendar -->
<script>
(function () {
const prevMonthBtn = document.querySelector('[data-fc-prev-month]')
const nextMonthBtn = document.querySelector('[data-fc-next-month]')
const todayBtn = document.querySelector('[data-fc-today]')
const dateTitle = document.querySelector('[data-fc-title]')
let gridViewSelect = document.querySelector('[data-fc-grid-view]')
HSCore.components.HSFullCalendar.init('#js-fullcalendar-custom-header', {
initialDate: "2020-09-10",
headerToolbar: false,
editable: true,
datesSet(dateSet) {
dateTitle.textContent = dateSet.view.title
},
events: [
{
"title": "English Lesson",
"start": "2020-09-03T01:00:00",
"end": "2020-09-03T02:30:00"
},
{
"title": "Spanish Lesson",
"start": "2020-09-03T04:00:00",
"end": "2020-09-03T05:30:00"
},
{
"title": "Javascript Lesson",
"start": "2020-09-14T01:00:00",
"end": "2020-09-16T02:30:00"
},
{
"title": "PHP Lesson",
"start": "2020-09-06T04:00:00",
"end": "2020-09-09T05:30:00"
}
]
})
const fullcalendarCustomHeader = HSCore.components.HSFullCalendar.getItem('js-fullcalendar-custom-header')
HSCore.components.HSTomSelect.init(gridViewSelect)
gridViewSelect = HSCore.components.HSTomSelect.getItem('customHeaderSelect')
prevMonthBtn.addEventListener('click', function () {
fullcalendarCustomHeader.prev()
const tooltip = document.querySelector('.tooltip')
if (tooltip) {
tooltip.remove()
}
})
nextMonthBtn.addEventListener('click', function () {
fullcalendarCustomHeader.next()
const tooltip = document.querySelector('.tooltip')
if (tooltip) {
tooltip.remove()
}
})
todayBtn.addEventListener('click', function () {
fullcalendarCustomHeader.today()
})
gridViewSelect.on('change', (val) => {
fullcalendarCustomHeader.changeView(val)
})
todayBtn.setAttribute('title', new Date().toDateString())
})()
</script>
