[194a359] | 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 | }); |
---|