Logo
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Tools / Compass Created with Sketch.
FullCalendar, the most popular full-sized JavaScript Calendar v4 Plugin. For more info please visit FullCalendar v4 Documentation.
FullCalendar v5 integration is coming soon

External Events

Meeting
Conference Call
Dinner
Product Launch
Reporting
Project Update
Staff Meeting
Lunch

Basic Calendar


                <div class="row">
                	<div class="col-lg-3">
                		<!--begin::Card-->
                		<div class="card card-custom card-stretch">
                			<div class="card-header">
                				<div class="card-title">
                					<h3 class="card-label">
                						External Events
                					</h3>
                				</div>
                			</div>
                			<div class="card-body">
                				<div id="kt_calendar_external_events" class="fc-unthemed">
                					<div class="fc-draggable-handle label font-weight-bolder label-lg label-primary label-inline mb-5 cursor-move" data-color="fc-event-primary">Meeting</div><br/>
                					<div class="fc-draggable-handle label font-weight-bolder label-lg label-primary label-inline mb-5 cursor-move" data-color="fc-event-primary">Conference Call</div><br/><br/>
                					<div class="fc-draggable-handle label font-weight-bolder label-lg label-success label-inline mb-5 cursor-move" data-color="fc-event-success">Dinner</div><br/>
                					<div class="fc-draggable-handle label font-weight-bolder label-lg label-warning label-inline mb-5 cursor-move" data-color="fc-event-warning">Product Launch</div><br/>
                					<div class="fc-draggable-handle label font-weight-bolder label-lg label-danger label-inline cursor-move" data-color="fc-event-danger">Reporting</div><br/>

                                    <div class="separator separator-dashed my-10"></div>

                                    <div class="fc-draggable-handle label font-weight-bolder label-lg label-success label-inline mb-5 cursor-move" data-color="fc-event-success">Project Update</div><br/>
                					<div class="fc-draggable-handle label font-weight-bolder label-lg label-info label-inline mb-5 cursor-move" data-color="fc-event-info">Staff Meeting</div><br/>
                					<div class="fc-draggable-handle label font-weight-bolder label-lg label-dark label-inline cursor-move" data-color="fc-event-dark">Lunch</div><br/>

                                    <div class="separator separator-dashed my-10"></div>
                					<div>
                						<label class="checkbox checkbox-primary">
                						<input type="checkbox" id="kt_calendar_external_events_remove"> Remove after drop
                						<span></span>
                						</label>
                					</div>
                				</div>
                			</div>
                		</div>
                		<!--end::Card-->
                	</div>
                	<div class="col-lg-9">
                		<!--begin::Card-->
                		<div class="card card-custom card-stretch">
                			<div class="card-header">
                				<div class="card-title">
                					<h3 class="card-label">
                						Basic 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>
                		<!--end::Card-->
                	</div>
                </div>
				

                var KTCalendarExternalEvents = function() {

                    var initExternalEvents = function() {
                        $('#kt_calendar_external_events .fc-draggable-handle').each(function() {
                            // store data so the calendar knows to render an event upon drop
                            $(this).data('event', {
                                title: $.trim($(this).text()), // use the element's text as the event title
                                stick: true, // maintain when user navigates (see docs on the renderEvent method)
                                classNames: [$(this).data('color')],
                                description: 'Lorem ipsum dolor eius mod tempor labore'
                            });
                        });
                    }

                    var initCalendar = 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 containerEl = document.getElementById('kt_calendar_external_events');

                        var Draggable = FullCalendarInteraction.Draggable;

                        new Draggable(containerEl, {
                            itemSelector: '.fc-draggable-handle',
                            eventData: function(eventEl) {
                                return $(eventEl).data('event');
                            }
                        });

                        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,

                            droppable: true, // this allows things to be dropped onto the calendar
                            editable: true,
                            eventLimit: true, // allow "more" link when too many events
                            navLinks: true,
                            events: [
                                {
                                    title: 'All Day Event',
                                    start: YM + '-01',
                                    description: 'Toto lorem ipsum dolor sit incid idunt ut',
                                    className: "fc-event-danger fc-event-solid-warnin"
                                },
                                {
                                    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'
                                },
                                {
                                    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'
                                },
                                {
                                    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'
                                },
                                {
                                    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'
                                },
                                {
                                    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'
                                },
                                {
                                    title: 'Click for Google',
                                    url: 'http://google.com/',
                                    start: YM + '-28',
                                    className: "fc-event-solid-info fc-event-ligh",
                                    description: 'Lorem ipsum dolor sit amet, labore'
                                }
                            ],

                            drop: function(arg) {
                                // is the "remove after drop" checkbox checked?
                                if ($('#kt_calendar_external_events_remove').is(':checked')) {
                                    // if so, remove the element from the "Draggable Events" list
                                    $(arg.draggedEl).remove();
                                }
                            },

                            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();
                    }

                    return {
                        //main function to initiate the module
                        init: function() {
                            initExternalEvents();
                            initCalendar();
                        }
                    };
                }();

                jQuery(document).ready(function() {
                    KTCalendarExternalEvents.init();
                });
				

Quick Actions finance & reports

User Profile 15 messages

Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Communication / Add-user Created with Sketch.
7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9