Logo

Calendar List View


                <div class="card card-custom">
                	<div class="card-header">
                		<div class="card-title">
                			<h3 class="card-label">
                				Calendar List View
                			</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 KTCalendarListView = 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,listWeek'
                                },

                                height: 800,
                                contentHeight: 750,
                                aspectRatio: 3,  // see: https://fullcalendar.io/docs/aspectRatio

                                views: {
                                    dayGridMonth: { buttonText: 'month' },
                                    timeGridWeek: { buttonText: 'week' },
                                    timeGridDay: { buttonText: 'day' },
                                    listDay: { buttonText: 'list' },
                                    listWeek: { buttonText: 'list' }
                                },

                                defaultView: 'listWeek',
                                defaultDate: TODAY,

                                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-warning"
                                    },
                                    {
                                        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-light",
                                        description: 'Lorem ipsum dolor sit amet, labore'
                                    }
                                ],

                                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() {
                    KTCalendarListView.init();
                });
				

Notifications 24 New

Quick Actions finance & reports

User Profile 12 messages

Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo


Deprecated: Return type of Adbar\Dot::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/docs/lib/dot.php on line 390

Deprecated: Return type of Adbar\Dot::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/docs/lib/dot.php on line 401

Deprecated: Return type of Adbar\Dot::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/docs/lib/dot.php on line 412

Deprecated: Return type of Adbar\Dot::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/docs/lib/dot.php on line 428

Deprecated: Return type of Adbar\Dot::count($key = null) should either be compatible with Countable::count(): int, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/docs/lib/dot.php on line 445

Deprecated: Return type of Adbar\Dot::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/docs/lib/dot.php on line 461

Deprecated: Return type of Adbar\Dot::jsonSerialize() should either be compatible with JsonSerializable::jsonSerialize(): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/docs/lib/dot.php on line 477
Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Demo 23
Demo 24
Demo 25
Demo 26
Demo 27
Demo 28
Demo 29
Demo 30