How to use
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="../node_modules/fullcalendar/main.min.css">
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../node_modules/fullcalendar/main.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="../assets/js/hs.fullcalendar.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of fullcalendar
$('.js-fullcalendar').each(function () {
var fullcalendar = $.HSCore.components.HSFullcalendar.init($(this));
});
});
</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.svg",
"className": ""
}'>
<div class='fc-event-title'>
<div class='d-flex align-items-center'>
<img class="avatar avatar-xss mr-2" src="../assets/svg/brands/jira.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.svg",
"className": "fc-event-success"
}'>
<div class='fc-event-title'>
<div class='d-flex align-items-center'>
<img class="avatar avatar-xss mr-2" src="../assets/svg/brands/excel.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.svg",
"className": ""
}'
>
<div class='fc-event-title'>
<div class='d-flex align-items-center'>
<img class="avatar avatar-xss mr-2" src="../assets/svg/brands/slack.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>
$(document).on('ready', function () {
// ADD DRAGGABLE CLASS FOR CALENDAR
// =======================================================
const Draggable = FullCalendar.Draggable;
new Draggable($('#external-events')[0], {
itemSelector: '.fc-event'
});
var fullcalendaDraggable = $.HSCore.components.HSFullcalendar.init($('#js-fullcalendar-draggable'), {
initialDate: "2020-09-10",
headerToolbar: {
left: "prev,next today",
center: "title",
right: ""
},
editable: true,
eventContent({event}) {
return {
html: `
<div class='d-flex align-items-center px-2'>
${event.extendedProps.image ? `<img class="avatar avatar-xss" src="${event.extendedProps.image}" alt="Image Description">` : ''}
<span class="fc-event-title fc-sticky">${event.title}</span>
</div>
`
}
},
drop({draggedEl}) {
$(draggedEl).remove()
},
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"
}
]
});
});
</script>
Date Clicking & Selecting
This example uses Date Range Picker and Datepicker libraries.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary mb-3" data-toggle="modal" data-target="#addEventModal">
<i class="tio-add"></i> Add event
</button>
<!-- End Button trigger modal -->
<!-- Fullcalendar -->
<div id="js-fullcalendar-editable" class="fullcalendar-custom"></div>
<!-- End Fullcalendar -->
<!-- Modal -->
<div class="modal fade" id="addEventModal" tabindex="-1" role="dialog" aria-labelledby="addEventModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-close">
<button type="button" class="btn btn-icon btn-sm btn-ghost-secondary" data-dismiss="modal" aria-label="Close">
<i class="tio-clear tio-lg"></i>
</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="media form-group">
<i class="tio-time nav-icon mt-2 mr-2"></i>
<div class="media-body">
<label for="eventDateRangeLabel" class="sr-only">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 mr-2 mb-0">Repeat:</label>
<!-- Select -->
<select class="js-select2-custom" id="eventRepeatLabel"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"dropdownAutoWidth": true,
"width": true
}'>
<option value="everyday" selected>Everyday</option>
<option value="weekdays">Weekdays</option>
<option value="never">Never</option>
</select>
<!-- End Select -->
</div>
</div>
<!-- End Media -->
<!-- Media -->
<div class="media form-group">
<i class="tio-group-senior nav-icon mt-2 mr-2"></i>
<div class="media-body">
<label for="eventGestsLabel" class="sr-only">Add guests</label>
<!-- Tagify -->
<input class="tagify-form-control form-control form-control-light form-control-borderless" id="eventGestsLabel" placeholder="Add guests" aria-label="Add guests"
data-hs-tagify-options='{
"delimiters": null,
"enforceWhitelist": true,
"whitelist": [
{
"value": "Amanda Harvey",
"src": "../assets/img/160x160/img10.jpg"
},{
"value": "David Harrison",
"src": "../assets/img/160x160/img3.jpg"
}, {
"value": "Finch Hoot",
"src": "../assets/img/160x160/img5.jpg"
}, {
"value": "Ella Lauda",
"src": "../assets/img/160x160/img9.jpg"
}
],
"dropdown": {
"enabled": 0,
"classname": "tagify__dropdown__menu"
}
}'>
<!-- End Tagify -->
</div>
</div>
<!-- End Media -->
<!-- Media -->
<div class="media form-group">
<i class="tio-poi nav-icon mt-2 mr-2"></i>
<div class="media-body">
<label for="eventLocationLabel" class="sr-only">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="media form-group">
<i class="tio-text-left nav-icon mt-2 mr-2"></i>
<div class="media-body">
<label for="eventDescriptionLabel" class="sr-only">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="media align-items-center" href="../user-profile.html">
<div class="avatar avatar-xs avatar-circle mr-3">
<img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
</div>
<div class="media-body">
<span class="d-block font-size-sm text-body">Assignee:</span>
<span class="h5 text-hover-primary">Amanda Harvey</span>
</div>
</a>
<!-- End Media -->
</div>
<div class="col-auto">
<label for="eventColorLabel" class="sr-only">Event color</label>
<!-- Select -->
<select class="js-select2-custom" id="eventColorLabel"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"placeholder": "Select event color",
"dropdownAutoWidth": true,
"width": true
}'>
<option value="rgba(55,125,255,.1)" selected data-option-template='<span class="legend-indicator bg-primary"></span>Primary'>Primary</option>
<option value="rgba(0,201,167,.1)" data-option-template='<span class="legend-indicator bg-success"></span>Green'>Green</option>
<option value="rgba(237,76,120,.1)" data-option-template='<span class="legend-indicator bg-danger"></span>Red'>Red</option>
<option value="rgba(245,202,153,.1)" data-option-template='<span class="legend-indicator bg-warning"></span>Yellow'>Yellow</option>
<option value="rgba(0,201,219,1)" data-option-template='<span class="legend-indicator bg-info"></span>Cyan'>Cyan</option>
<option value="rgba(19,33,68,1)" data-option-template='<span class="legend-indicator bg-dark"></span>Navy'>Navy</option>
</select>
<!-- End Select -->
</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="../node_modules/daterangepicker/moment.min.js"></script>
<script src="../node_modules/flatpickr/dist/flatpickr.min.js"></script>
<script>
$(document).on('ready', function () {
// INITIALIZATION OF FLATPICKR
// =======================================================
const eventDateRange = $.HSCore.components.HSFlatpickr.init($('#eventDateRangeLabel'));
const titleField = $('#eventTitle')
const repeatField = $('#eventRepeatLabel')
const eventDescriptionLabel = $('#eventDescriptionLabel')
const eventLocationLabel = $('#eventLocationLabel')
const eventColorLabel = $('#eventColorLabel')
var editableEvent = {}
var fullcalendarEditable = $.HSCore.components.HSFullcalendar.init($('#js-fullcalendar-editable'), {
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) {
$('.popover').popover('dispose')
// Get Avatars HTML
function getAvatars(members) {
const wrapper = $('<div>').addClass('avatar-group avatar-group-sm mb-1')
members.forEach(function (member) {
wrapper.append(`
<span class="avatar avatar-circle">
<img class="avatar-img" src="${member.src}" alt="Image Description">
</span>
`)
})
return wrapper[0].outerHTML
}
// Popover Content
const content = `
<div class="text-white">
<ul class="list-unstyled">
<li class="d-flex">Start: ${moment(event.event.start).format('YYYY-MM-DD hh:mm')}</li>
<li class="d-flex">End: ${moment(event.event.end).format('YYYY-MM-DD hh:mm')}</li>
<li class="d-flex">Repeat: ${event.event.extendedProps.repeatField}</li>
<li class="d-flex">Location: ${event.event.extendedProps.eventLocationLabel}</li>
<li class="d-flex">Description: ${event.event.extendedProps.eventDescriptionLabel}</li>
<li>Gests: ${getAvatars(event.event.extendedProps.gestsField)}</li>
</ul>
<a id="modal-invoker-${event.event.id}" href="javascript:;" class="btn btn-soft-primary btn-sm">Edit</a>
</div>
`
// Open Popover
$(event.el).popover({
html: true,
title: event.event.title,
content: content
})
.popover('show')
// Open Modal For Editing
$(event.el).on('shown.bs.popover', function () {
$('#modal-invoker-' + event.event.id).click(function () {
$(event.el).popover('dispose')
prepareData(event.event.title, event.event.start, event.event.end, event.event)
})
})
},
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",
gestsField: []
},
{
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",
gestsField: []
},
{
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",
gestsField: []
},
{
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",
gestsField: []
}
]
});
$('body').on('click', function (e) {
if (!$(e.target).closest('.fc-daygrid-event-harness').length
&& !$(e.target).closest('.popover').length) {
$('.popover').popover('dispose');
}
});
$('#processEvent').click(function () {
if (!Object.keys(editableEvent).length) {
const date = eventDateRange.selectedDates
fullcalendarEditable.addEvent({
id: new Date().getTime(),
title: titleField.val() || '(No title)',
repeatField: repeatField.val(),
gestsField: gestsField.value,
eventDescriptionLabel: eventDescriptionLabel.val(),
eventLocationLabel: eventLocationLabel.val(),
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.val()
})
} else {
const date = eventDateRange.selectedDates
editableEvent.setProp('title', titleField.val())
editableEvent.setExtendedProp('repeatField', repeatField.val())
editableEvent.setExtendedProp('gestsField', gestsField.value)
editableEvent.setExtendedProp('eventDescriptionLabel', eventDescriptionLabel.val())
editableEvent.setExtendedProp('eventLocationLabel', eventLocationLabel.val())
editableEvent.setProp('color', eventColorLabel.val())
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').modal('hide')
})
$('#addEventModal').on('show.bs.modal', function () {
clearForm()
})
function prepareData(title, start, end, event = {}) {
$('#addEventModal').modal('show')
$('#processEvent').text('Save')
titleField.val(title)
eventDateRange.setDate([moment(start).format('MM/DD/YYYY'), moment(end).format('MM/DD/YYYY')])
if (Object.keys(event).length) {
repeatField.val(event.extendedProps.repeatField)
repeatField.trigger('change')
gestsField.addTags(event.extendedProps.gestsField)
eventDescriptionLabel.val(event.extendedProps.eventDescriptionLabel)
eventLocationLabel.val(event.extendedProps.eventLocationLabel)
eventColorLabel.val(event.backgroundColor)
eventColorLabel.trigger('change')
editableEvent = event
}
}
function clearForm() {
titleField.val('')
eventDescriptionLabel.val('')
eventLocationLabel.val('')
repeatField.val('everyday')
repeatField.trigger('change')
eventColorLabel.val('rgba(55,125,255,.1)')
eventColorLabel.trigger('change')
gestsField.removeAllTags()
editableEvent = {}
$('#processEvent').text('Create Event')
}
$(document).scroll(function () {
if ($('.fc-more-popover').length) {
$('.fc-more-popover').remove()
}
})
});
</script>
With search
<div class="form-group input-group input-group-merge">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="tio-search"></i>
</div>
</div>
<input type="text" id="filter-by-title" class="form-control" placeholder="Search by title">
</div>
<div id="js-fullcalendar-with-search" class="fullcalendar-custom"></div>
<script>
$(document).on('ready', function () {
// INITIALIZATION OF FULLCALENDAR WITH SEARCH
// =======================================================
const fullcalendarWithSearch = $.HSCore.components.HSFullcalendar.init($('#js-fullcalendar-with-search'), {
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"
}
]
})
const filterSearchExample = new HSFullcalendarFilter(fullcalendarWithSearch)
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
<div class="form-group">
<!-- Form Check -->
<div class="form-check form-check-inline">
<div class="custom-control custom-checkbox" data-filter>
<input type="checkbox" id="customInlineCheck1" class="custom-control-input" value="1" checked>
<label class="custom-control-label" for="customInlineCheck1">category 1</label>
</div>
</div>
<!-- End Form Check -->
<!-- Form Check -->
<div class="form-check form-check-inline">
<div class="custom-control custom-checkbox" data-filter>
<input type="checkbox" id="customInlineCheck2" class="custom-control-input indeterminate-checkbox" value="2" checked>
<label class="custom-control-label" for="customInlineCheck2">category 2</label>
</div>
</div>
<!-- End Form Check -->
<!-- Form Check -->
<div class="form-check form-check-inline">
<div class="custom-control custom-checkbox" data-filter>
<input type="checkbox" id="customInlineCheck3" class="custom-control-input" value="3" checked>
<label class="custom-control-label" for="customInlineCheck3">category 3</label>
</div>
</div>
<!-- End Form Check -->
</div>
<div id="js-fullcalendar-with-filters" class="fullcalendar-custom"></div>
<script>
$(document).on('ready', function () {
// INITIALIZATION OF FULLCALENDAR WITH FILTERS
// =======================================================
const fullcalendarWithFilters = $.HSCore.components.HSFullcalendar.init($('#js-fullcalendar-with-filters'), {
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",
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
}
]
})
const filterCheckboxExample = new HSFullcalendarFilter(fullcalendarWithFilters)
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 select2
This example uses select2 library.
<div id="js-fullcalendar-select2" class="fullcalendar-custom"></div>
<script>
$(document).on('ready', function () {
// INITIALIZATION OF FULLCALENDAR SELECT2
// =======================================================
const fullcalendarWithSelect2 = $.HSCore.components.HSFullcalendar.init($('#js-fullcalendar-select2'), {
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
// =======================================================
$('#js-fullcalendar-select2 .fc-toolbar-chunk').last().append(
"<select id=\"changeView\">" +
"<option value='dayGridMonth'>Month</option>" +
"<option value='dayGridWeek'>Week</option>" +
"<option value='dayGridDay'>Day</option>" +
"</select>"
)
// INITIALIZATION OF SELECT2
// =======================================================
var select2ForHeader = $.HSCore.components.HSSelect2.init($('#changeView'), {
minimumResultsForSearch: "Infinity",
customClass: "custom-select custom-select-sm"
});
select2ForHeader.on('select2:select', function (event) {
fullcalendarWithSelect2.changeView(event.target.value)
})
});
</script>
Time Grid
<!-- Fullcalendar -->
<div id="js-fullcalendar-custom-render" class="fullcalendar-custom"></div>
<!-- End Fullcalendar -->
<!-- Event Time Grid Modal -->
<div class="modal fade" id="eventTimeGridModal" tabindex="-1" role="dialog" aria-labelledby="addEventModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<h5 class="modal-title" id="eventTimeGridModalLabel">Event Modal</h5>
<button type="button" class="btn btn-icon btn-sm btn-ghost-secondary" data-dismiss="modal" aria-label="Close">
<i class="tio-clear tio-lg" aria-hidden="true"></i>
</button>
</div>
<!-- End Header -->
<!-- Body -->
<div class="modal-body">
</div>
<!-- End Body -->
<!-- Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
<!-- End Footer -->
</div>
</div>
</div>
<!-- End Event Time Grid Modal -->
<script>
$(document).on('ready', function () {
var fullcalendarCustomRender = $.HSCore.components.HSFullcalendar.init($('#js-fullcalendar-custom-render'), {
initialDate: "2020-09-03",
initialView: "timeGrid",
editable: true,
events: [
{
"title": "SOLID in JavaScript Lesson",
"start": "2020-09-03T07:00:00",
"end": "2020-09-03T08:30:00",
icon: "tio-tv-new"
},
{
"title": "Vue Patterns",
"start": "2020-09-03T11:00:00",
"end": "2020-09-03T12:30:00",
icon: "tio-tv-new"
},
],
eventClick: function(calEvent) {
$('#eventTimeGridModal').modal('show')
},
eventContent: function (event) {
return {
html: `
<div class="media fc-custom-event align-items-center p-2">
<span class="icon icon-primary mr-3">
<i class="${event.event._def.extendedProps.icon}"></i>
</span>
<div class="media-body">
<h4 class="mb-1">${event.event.title}</h4>
<span class="text-body font-weight-bold">${event.timeText}</span>
</div>
<div class="avatar-group avatar-group-sm ml-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>
`
}
}
})
});
</script>
Custom Header
This example uses select2 library.
<!-- Custom Header -->
<div class="row align-items-sm-center mb-4">
<div class="col mb-2 mb-sm-0 mr-2">
<div class="d-sm-flex align-items-sm-center">
<button type="button" class="btn btn-white mr-3" data-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 mr-1" data-fc-prev-month data-toggle="tooltip" data-placement="top" title="Previous month">
<i class="tio-chevron-left"></i>
</button>
<button type="button" class="btn btn-icon btn-sm btn-ghost-secondary btn-no-focus rounded-circle ml-1" data-fc-next-month data-toggle="tooltip" data-placement="top" title="Next month">
<i class="tio-chevron-right"></i>
</button>
<div class="ml-3">
<h4 class="h3 mb-0" data-fc-title></h4>
</div>
</div>
</div>
<div class="col-auto">
<!-- Select2 -->
<select class="js-select2-custom custom-select" size="1" style="opacity: 0;" data-fc-grid-view
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"width": "100px"
}'>
<option value="dayGridMonth">Month</option>
<option value="dayGridWeek">Week</option>
<option value="dayGridDay">Day</option>
</select>
<!-- End Select2 -->
</div>
</div>
<!-- End Custom Header -->
<!-- FullCalendar -->
<div id="js-fullcalendar-custom-header" class="fullcalendar-custom"></div>
<!-- End FullCalendar -->
<script>
$(document).on('ready', function () {
$('.js-select2-custom').each(function () {
var select2 = $.HSCore.components.HSSelect2.init($(this));
});
const prevMonthBtn = $('[data-fc-prev-month]')
const nextMonthBtn = $('[data-fc-next-month]')
const todayBtn = $('[data-fc-today]')
const dateTitle = $('[data-fc-title]')
const gridViewSelect = $('[data-fc-grid-view]')
var fullcalendarCustomHeader = $.HSCore.components.HSFullcalendar.init($('#js-fullcalendar-custom-header'), {
initialDate: "2020-09-10",
headerToolbar: false,
editable: true,
datesSet(dateSet) {
dateTitle.text(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"
}
]
})
prevMonthBtn.click(function () {
fullcalendarEditable.prev()
$('[data-toggle="tooltip"]').tooltip('hide');
})
nextMonthBtn.click(function () {
fullcalendarEditable.next()
$('[data-toggle="tooltip"]').tooltip('hide');
})
todayBtn.click(function () {
fullcalendarCustomHeader.today()
})
gridViewSelect.on('change', function (event) {
fullcalendarCustomHeader.changeView($(event.target).val())
})
todayBtn.attr('title', new Date().toDateString())
});
</script>
