<div class="card card-custom">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">
Background Calendar
</h3>
</div>
<div class="card-toolbar">
<a href="#" class="btn btn-light-primary font-weight-bold">
<i class="ki ki-plus "></i> Add Event
</a>
</div>
</div>
<div class="card-body">
<div id="kt_calendar"></div>
</div>
</div>
var KTCalendarBasic = function() {
return {
//main function to initiate the module
init: function() {
var todayDate = moment().startOf('day');
var YM = todayDate.format('YYYY-MM');
var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
var TODAY = todayDate.format('YYYY-MM-DD');
var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
var calendarEl = document.getElementById('kt_calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
isRTL: KTUtil.isRTL(),
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
height: 800,
contentHeight: 780,
aspectRatio: 3, // see: https://fullcalendar.io/docs/aspectRatio
nowIndicator: true,
now: TODAY + 'T09:25:00', // just for demo
views: {
dayGridMonth: { buttonText: 'month' },
timeGridWeek: { buttonText: 'week' },
timeGridDay: { buttonText: 'day' }
},
defaultView: 'dayGridMonth',
defaultDate: TODAY,
editable: true,
eventLimit: true, // allow "more" link when too many events
navLinks: true,
businessHours: true, // display business hours
events: [
{
title: 'All Day Event',
start: YM + '-01',
description: 'Toto lorem ipsum dolor sit incid idunt ut',
className: "fc-event-danger fc-event-solid-warning",
color: KTApp.getStateColor('info'),
rendering: 'background'
},
{
title: 'Reporting',
start: YM + '-14T13:30:00',
description: 'Lorem ipsum dolor incid idunt ut labore',
end: YM + '-14',
className: "fc-event-success"
},
{
title: 'Company Trip',
start: YM + '-02',
description: 'Lorem ipsum dolor sit tempor incid',
end: YM + '-03',
className: "fc-event-primary"
},
{
title: 'ICT Expo 2017 - Product Release',
start: YM + '-03',
description: 'Lorem ipsum dolor sit tempor inci',
end: YM + '-05',
className: "fc-event-light fc-event-solid-primary"
},
{
title: 'Dinner',
start: YM + '-12',
description: 'Lorem ipsum dolor sit amet, conse ctetur',
end: YM + '-10',
color: KTApp.getStateColor('info'),
rendering: 'background'
},
{
id: 999,
title: 'Repeating Event',
start: YM + '-09T16:00:00',
description: 'Lorem ipsum dolor sit ncididunt ut labore',
className: "fc-event-danger"
},
{
id: 1000,
title: 'Repeating Event',
description: 'Lorem ipsum dolor sit amet, labore',
start: YM + '-16T16:00:00',
color: KTApp.getStateColor('warning'),
rendering: 'background'
},
{
title: 'Conference',
start: YESTERDAY,
end: TOMORROW,
description: 'Lorem ipsum dolor eius mod tempor labore',
className: "fc-event-primary"
},
{
title: 'Meeting',
start: TODAY + 'T10:30:00',
end: TODAY + 'T12:30:00',
description: 'Lorem ipsum dolor eiu idunt ut labore',
color: KTApp.getStateColor('danger'),
rendering: 'background'
},
{
title: 'Lunch',
start: TODAY + 'T12:00:00',
className: "fc-event-info",
description: 'Lorem ipsum dolor sit amet, ut labore'
},
{
title: 'Meeting',
start: TODAY + 'T14:30:00',
className: "fc-event-warning",
description: 'Lorem ipsum conse ctetur adipi scing'
},
{
title: 'Happy Hour',
start: TODAY + 'T17:30:00',
className: "fc-event-info",
description: 'Lorem ipsum dolor sit amet, conse ctetur',
color: KTApp.getStateColor('danger'),
rendering: 'background'
},
{
title: 'Dinner',
start: TOMORROW + 'T05:00:00',
className: "fc-event-solid-danger fc-event-light",
description: 'Lorem ipsum dolor sit ctetur adipi scing'
},
{
title: 'Birthday Party',
start: TOMORROW + 'T07:00:00',
className: "fc-event-primary",
description: 'Lorem ipsum dolor sit amet, scing',
color: KTApp.getStateColor('danger'),
rendering: 'background'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: YM + '-28',
className: "fc-event-solid-info fc-event-light",
description: 'Lorem ipsum dolor sit amet, labore',
color: KTApp.getStateColor('success'),
rendering: 'background'
}
],
eventRender: function(info) {
var element = $(info.el);
if (info.event.extendedProps && info.event.extendedProps.description) {
if (element.hasClass('fc-day-grid-event')) {
element.data('content', info.event.extendedProps.description);
element.data('placement', 'top');
KTApp.initPopover(element);
} else if (element.hasClass('fc-time-grid-event')) {
element.find('.fc-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
} else if (element.find('.fc-list-item-title').lenght !== 0) {
element.find('.fc-list-item-title').append('<div class="fc-description">' + info.event.extendedProps.description + '</div>');
}
}
}
});
calendar.render();
}
};
}();
jQuery(document).ready(function() {
KTCalendarBasic.init();
});
Lorem Ipsum is simply dummy text of the printing and industry.
There are many variations of passages of Lorem Ipsum available.
Contrary to popular belief, Lorem Ipsum is not simply random text.
If you are going to use a passage of Lorem Ipsum, you need.
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
