1 | 'use strict';
|
---|
2 | $(document).ready(function () {
|
---|
3 |
|
---|
4 | var events = [
|
---|
5 | {
|
---|
6 | title: 'Travel',
|
---|
7 | start: '2019-10-30:00:00',
|
---|
8 | constraint: 'businessHours',
|
---|
9 | className: 'bg-danger',
|
---|
10 | icon: "camera",
|
---|
11 | description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
|
---|
12 | },
|
---|
13 | {
|
---|
14 | title: 'Team Assing',
|
---|
15 | start: '2019-10-15:00:00',
|
---|
16 | constraint: 'availableForMeeting',
|
---|
17 | className: 'bg-primary',
|
---|
18 | description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
|
---|
19 | },
|
---|
20 | {
|
---|
21 | title: 'Friend',
|
---|
22 | start: '2019-10-10:00:00',
|
---|
23 | end: '2019-10-11:00:00',
|
---|
24 | className: 'bg-info',
|
---|
25 | icon: "user-o",
|
---|
26 | description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
|
---|
27 | },
|
---|
28 | {
|
---|
29 | title: 'Holidays',
|
---|
30 | start: '2019-10-10:00:00',
|
---|
31 | end: '2019-10-12:00:00',
|
---|
32 | className: 'bg-success',
|
---|
33 | description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
|
---|
34 | },
|
---|
35 | {
|
---|
36 | title: 'Company',
|
---|
37 | start: '2019-10-03:00:00',
|
---|
38 | className: 'bg-warning',
|
---|
39 | icon: "building-o",
|
---|
40 | description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
|
---|
41 | },
|
---|
42 | {
|
---|
43 | id: 'availableForMeeting',
|
---|
44 | start: '2019-03-13T10:00:00',
|
---|
45 | end: '2019-03-13T16:00:00',
|
---|
46 | rendering: 'background',
|
---|
47 | description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
|
---|
48 | },
|
---|
49 | {
|
---|
50 | start: '2019-03-24',
|
---|
51 | end: '2019-03-29',
|
---|
52 | overlap: false,
|
---|
53 | rendering: 'background',
|
---|
54 | color: '#ff9f89',
|
---|
55 | description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
|
---|
56 | },
|
---|
57 | {
|
---|
58 | start: '2019-03-06',
|
---|
59 | end: '2019-03-29',
|
---|
60 | overlap: false,
|
---|
61 | rendering: 'background',
|
---|
62 | color: '#ff9f89',
|
---|
63 | description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
|
---|
64 | }
|
---|
65 | ];
|
---|
66 |
|
---|
67 | $('#external-events .fc-event').each(function () {
|
---|
68 |
|
---|
69 | // store data so the calendar knows to render an event upon drop
|
---|
70 | $(this).data('event', {
|
---|
71 | title: $.trim($(this).text()), // use the element's text as the event title
|
---|
72 | stick: true, // maintain when user navigates (see docs on the renderEvent method),
|
---|
73 | color: $(this).find('i').css("color"),
|
---|
74 | icon: $(this).find('i').data('icon')
|
---|
75 | });
|
---|
76 |
|
---|
77 | // make the event draggable using jQuery UI
|
---|
78 | $(this).draggable({
|
---|
79 | zIndex: 999,
|
---|
80 | revert: true, // will cause the event to go back to its
|
---|
81 | revertDuration: 0 // original position after the drag
|
---|
82 | });
|
---|
83 |
|
---|
84 | });
|
---|
85 |
|
---|
86 | $('#calendar-demo').fullCalendar({
|
---|
87 | header: {
|
---|
88 | left: 'prev,next today',
|
---|
89 | center: 'title',
|
---|
90 | right: 'month,agendaWeek,agendaDay,listMonth'
|
---|
91 | },
|
---|
92 | editable: true,
|
---|
93 | droppable: true,
|
---|
94 | drop: function () {
|
---|
95 | // is the "remove after drop" checkbox checked?
|
---|
96 | if ($('#drop-remove').is(':checked')) {
|
---|
97 | // if so, remove the element from the "Draggable Events" list
|
---|
98 | $(this).remove();
|
---|
99 | }
|
---|
100 | },
|
---|
101 | weekNumbers: true,
|
---|
102 | eventLimit: true, // allow "more" link when too many events
|
---|
103 | events: events,
|
---|
104 | eventRender: function (event, element) {
|
---|
105 | if (event.icon) {
|
---|
106 | element.find(".fc-title").prepend("<i class='mr-1 fa fa-" + event.icon + "'></i>");
|
---|
107 | }
|
---|
108 | },
|
---|
109 | dayClick: function () {
|
---|
110 | $('#createEventModal').modal();
|
---|
111 | },
|
---|
112 | eventClick: function (event, jsEvent, view) {
|
---|
113 | var modal = $('#viewEventModal');
|
---|
114 | modal.find('.event-icon').html("<i class='fa fa-" + event.icon + "'></i>");
|
---|
115 | modal.find('.event-title').html(event.title);
|
---|
116 | modal.find('.event-body').html(event.description);
|
---|
117 | modal.modal();
|
---|
118 | },
|
---|
119 | });
|
---|
120 | }); |
---|