/*=========================================================================================
    File Name: fullcalendar.js
    Description: Fullcalendar
    --------------------------------------------------------------------------------------
    Item Name: Robust - Responsive Admin Template
    Author: PIXINVENT
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/


$(document).ready(function(){
  /************************************************
    *               External Dragging               *
    ************************************************/

    /* initialize the calendar
    -----------------------------------------------------------------*/

    var Calendar = FullCalendar.Calendar;
    var Draggable = FullCalendarInteraction.Draggable;

    var containerEl = document.getElementById('external-events');
    var calendarEl = document.getElementById('fc-external-drag');
    var checkbox = document.getElementById('drop-remove');

    // initialize the calendar
    // -----------------------------------------------------------------
    var calendar = new Calendar(calendarEl, {
        header: {
            left: 'prev,next today',
            center: 'title',
            right: "dayGridMonth,timeGridWeek,timeGridDay"
        },
        editable: true,
        plugins: ["dayGrid", "timeGrid", "interaction"],
        droppable: true, // this allows things to be dropped onto the calendar
        defaultDate: '2019-01-01',
        events: [
        {
            title: 'All Day Event',
            start: '2019-01-01',
            color:'#009688'
        },
        {
            title: 'Long Event',
            start: '2019-01-07',
            end: '2019-01-10',
            color:'#4CAF50'
        },
        {
            id: 999,
            title: 'Meeting',
            start: '2019-01-09T16:00:00',
            color:  '#00bcd4'
        },
        {
            id: 999,
            title: 'Happy Hour',
            start: '2019-01-16T16:00:00',
            color:'#3f51b5'
        },
        {
            title: 'Conference Meeting',
            start: '2019-01-11',
            end: '2019-01-13',
            color:'#e51c23'
        },
        {
            title: 'Meeting',
            start: '2019-01-12T10:30:00',
            end: '2019-01-12T12:30:00',
            color:'#00bcd4'
        },
        {
            title: 'Dinner',
            start: '2019-01-12T20:00:00',
            color:'#4a148c'
        },
        {
            title: 'Birthday Party',
            start: '2019-01-13T07:00:00',
            color:'#ff5722'
        },
        {
            title: 'Click for Google',
            url: 'http://google.com/',
            start: '2019-01-28',
        }
    ],
        drop: function(info) {
        // is the "remove after drop" checkbox checked?
        if (checkbox.checked) {
            // if so, remove the element from the "Draggable Events" list
            info.draggedEl.parentNode.removeChild(info.draggedEl);
        }
        }
    });
    calendar.render()

    $('#external-events .fc-event').each(function () {
        // Different colors for events
        $(this).css({ 'backgroundColor': $(this).data('color'), 'borderColor': $(this).data('color') });
    });

    var colorData;
    $('#external-events .fc-event').mousemove(function(){
    colorData = $(this).data('color');
    })
    new Draggable(containerEl, {
        itemSelector: '.fc-event',
        eventData: function(eventEl) {
            return {
            title: eventEl.innerText,
            color: colorData
            };
        }
    });


    /****************************************
    *				Selectable				*
    ****************************************/
    var calendarE6 = document.getElementById('fc-selectable');
    var fcSelectable = new FullCalendar.Calendar(calendarE6, {
      header: {
        left: 'prev,next today',
        center: 'title',
        right: "dayGridMonth,timeGridWeek,timeGridDay"
      },
      defaultDate: '2016-06-12',
      selectable: true,
      plugins: ["dayGrid", "timeGrid", "interaction"],
      selectHelper: true,
      select: function(arg) {
        var title = prompt('Event Title:');
        if (title) {
          fcSelectable.addEvent({
            title: title,
            start: arg.start,
            end: arg.end,
            allDay: arg.allDay
          })
        }
        fcSelectable.unselect()
      },
      editable: true,
      eventLimit: true, // allow "more" link when too many events
      events: [
        {
          title: 'All Day Event',
          start: '2016-06-01'
        },
        {
          title: 'Long Event',
          start: '2016-06-07',
          end: '2016-06-10'
        },
        {
          id: 999,
          title: 'Repeating Event',
          start: '2016-06-09T16:00:00'
        },
        {
          id: 999,
          title: 'Repeating Event',
          start: '2016-06-16T16:00:00'
        },
        {
          title: 'Conference',
          start: '2016-06-11',
          end: '2016-06-13'
        },
        {
          title: 'Meeting',
          start: '2016-06-12T10:30:00',
          end: '2016-06-12T12:30:00'
        },
        {
          title: 'Lunch',
          start: '2016-06-12T12:00:00'
        },
        {
          title: 'Meeting',
          start: '2016-06-12T14:30:00'
        },
        {
          title: 'Happy Hour',
          start: '2016-06-12T17:30:00'
        },
        {
          title: 'Dinner',
          start: '2016-06-12T20:00:00'
        },
        {
          title: 'Birthday Party',
          start: '2016-06-13T07:00:00'
        },
        {
          title: 'Click for Google',
          url: 'http://google.com/',
          start: '2016-06-28'
        }
      ]
    });

    fcSelectable.render();

  });