Untitled

@{
    ViewData["Title"] = "Index";
}
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />

    <link href='~/fcs/core/main.css' rel='stylesheet' />
    <link href='~/fcs/daygrid/main.css' rel='stylesheet' />
    <link href='~/fcs/timegrid/main.css' rel='stylesheet' />
    <link href='~/fcs/timeline/main.css' rel='stylesheet' />
    <link href='~/fcs/resource-timeline/main.css' rel='stylesheet' />

    <script src='~/lib/jquery/dist/jquery.min.js'></script>
    <script src='~/fcs/core/main.js'></script>
    <script src='~/fcs/interaction/main.js'></script>
    <script src='~/fcs/daygrid/main.js'></script>
    <script src='~/fcs/timegrid/main.js'></script>
    <script src='~/fcs/timeline/main.js'></script>
    <script src='~/fcs/resource-common/main.js'></script>
    <script src='~/fcs/resource-timeline/main.js'></script>
    <script>
        var showContext = false;
        var contextEventId = null;
        document.addEventListener('DOMContentLoaded', function () {
            var Calendar = FullCalendar.Calendar;
            var Draggable = FullCalendarInteraction.Draggable;

            /* initialize the external events
            -----------------------------------------------------------------*/

            var containerEl = document.getElementById('external-events');
            new Draggable(containerEl, {
                itemSelector: '.fc-event',
                eventData: function (eventEl) {
                    return {
                        title: eventEl.innerText.trim(),
                        id: '456'
                    }
                }
            });


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

            var calendarEl = document.getElementById('calendar');

            var calendar = new Calendar(calendarEl, {
                schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
                plugins: ['interaction', 'dayGrid', 'timeGrid', 'resourceTimeline'],
                now: '2019-07-04',
                editable: true,             // enable draggable events
                droppable: true,            // this allows things to be dropped onto the calendar
                aspectRatio: 2,
                scrollTime: '00:00',        // undo default 6am scrollTime
                slotWidth: '100',           // Added by DW
                businessHours: {
                    daysOfWeek: [1, 2, 3, 4, 5],
                    startTime: '08:00',
                    endTime: '18:00'
                },                          // Added by DW
                height: 900,                // Added by DW
                resourceAreaWidth: "20%",   // Added by DW
                header: {
                    left: '',
                    center: 'title',
                    right: 'today prev,next'
                },
                defaultView: 'resourceTimelineThreeWeeks',   //Changed by DW
                views: {
                    resourceTimelineThreeWeeks: {
                        type: 'resourceTimeline',
                        duration: { weeks: 3 },             //Changed by DW
                        buttonText: '3 weeks'               //Changed by DW
                    },
                    resourceTimelineFourWeeks: {
                        type: 'resourceTimeline',
                        duration: { weeks: 4 },             //Changed by DW
                        buttonText: '4 weeks'               //Changed by DW
                    }
                },
                resourceLabelText: 'People',
                resourceRender: function (arg) {
                    arg.el.parentNode.style.backgroundColor = arg.resource.extendedProps.color;
                },
                resourceColumns: [
                    {
                        labelText: 'Location',
                        field: 'location',
                        width: '5%'
                    },
                    {
                        labelText: 'Name',
                        field: 'name',
                        width: '14%'
                    }
                ],
                resources: {
                    url: '/data/resources_' + $('#TeamSelect').val() + '.json'  //DW moved from a local array to external json
                },
                //refetchResourcesOnNavigate: false, // Added by DW
                refetchResourcesOnNavigate: true, // Added by DW
//                resources: function (fetchInfo, successCallback, failureCallback) {
//                    $.getJSON({
 //                       url: '/data/resources_' + $('#TeamSelect').val() + '.json'
 //                   }, function (resources) {
 //                       successCallback(resources); //return resource data to the calendar via the provided callback function
//                    });
//                },
                events: {
                    url: '/data/events.json'  //DW moved from a local array to external json
                },
                drop: function (arg) {
                    console.log('drop date: ' + arg.dateStr)

                    if (arg.resource) {
                        console.log('drop resource: ' + arg.resource.id)
                    }

                },
                eventReceive: function (arg) { // called when a proper external event is dropped
                    console.log('eventReceive', arg.event);
                    arg.event.id = '456';

                },
                eventDrop: function (arg) { // called when an event (already on the calendar) is moved
                    console.log('eventDrop', arg.event);
                },
                eventClick: function (info) {
                    console.log('Event Clicked....' + info.event.id);
                    if (contextEventId != info.event.id) {
                        showContext = true;
                    }

                    var contextMenu = document.getElementById('ContextMenu');
                    var rect = info.el.getBoundingClientRect();
                    contextMenu.style.left = rect.left + document.body.scrollLeft + 'px';
                    contextMenu.style.top = 22 + rect.top + document.body.scrollTop + 'px';
                    contextMenu.style.width = info.el.offsetWidth;
                    contextMenu.style.display = showContext ? '' : 'none';
                    showContext = !showContext;
                    contextEventId = info.event.id;
                }
            });
            calendar.render();

            document.getElementById('MoveEventBtn').addEventListener('click', function () {
                var event = calendar.getEventById('12');
                if (event) {
                    event.setDates('2019-07-05', '2019-07-07', { allDay: true });
                    event.setResources(['a']);
                }

                //"start": "2019-07-02",
                //"end": "2019-07-03",
            });

            $('#ContextMenu li:not(.no-op)').on('click', function () {
                var text = $(this).text();
                alert(text + ' clicked...');
                $('#ContextMenu').hide();
                contextEventId = '';
            });

            $('#ContextMenu li.no-op .color-swab').on('click', function () {
                var event = calendar.getEventById(contextEventId);
                if (!event) return;
                //alert('Here 2');
                event.setProp($(this).parent().data('event-property'), $(this).css('background-color'));
                calendar.rerenderEvents();
                $('#ContextMenu').hide();
                //alert('Here 3');
                contextEventId = '';
            });

            $('#TeamSelect').on('change', function () {
                $('#calendar').fullCalendar( 'refetchResources ');
            });

            $('#changeResources').on('click', function () {
                alert('Here 3');
                $('#calendar').fullCalendar( 'refetchResources' );
            });

        });</script>

    <style>


        body {
            margin-top: 40px;
            font-size: 14px;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
        }

        #wrap {
            width: 1900px;
            margin: 0 auto;
        }

        #external-events {
            float: left;
            width: 150px;
            padding: 0 10px;
            border: 1px solid #ccc;
            background: #eee;
            text-align: left;
        }

            #external-events h4 {
                font-size: 16px;
                margin-top: 0;
                padding-top: 1em;
            }

            #external-events .fc-event {
                margin: 10px 0;
                cursor: pointer;
            }

            #external-events p {
                margin: 1.5em 0;
                font-size: 11px;
                color: #666;
            }

                #external-events p input {
                    margin: 0;
                    vertical-align: middle;
                }

        #calendar {
            float: right;
            width: 1600px;
        }

        #ContextMenu {
            width: 180px;
        }

            #ContextMenu ul {
                list-style-type: none;
                padding: 0;
                margin: 1px;
            }

                #ContextMenu ul li {
                    line-height: 1.1em;
                    padding: 3px;
                    cursor: pointer;
                    font-size: 0.8em;
                }

                    #ContextMenu ul li:hover {
                        background-color: #DDDDDD;
                    }

                    #ContextMenu ul li .color-swab {
                        border: 1px solid #000;
                        width: 10px;
                        height: 10px;
                        float: right;
                        margin: 0px 0px 0px 4px;
                    }
    </style>
</head>
<body>
    <div id='wrap'>
        <div id='external-events'>
            <h4>On-site</h4>
            <div class='fc-event'>J1234, Elevations, Job Short Name</div>
            <div class='fc-event'>J4323, Site Plan, Shell Garage Sale</div>

            <h4>CAD</h4>
            <div class='fc-event'>J1234, Elevations, Job Short Name</div>
            <div class='fc-event'>J4323, Site Plan, Shell Garage Sale</div>
            <br />
            <div class='fc-event'>Annual Leave</div>
            <div class='fc-event'>Other</div>

            <button type="button" id="MoveEventBtn">Move Event</button>

            <button type="button" id="changeResources">Click to Change Resources</button>

            <select name="TeamSelect" id="TeamSelect">
                <option>team1</option>
                <option>all</option>
            </select>
        </div>

        <div id='calendar'>
        </div>

        <div style='clear:both'></div>

        <div id="ContextMenu" style="display: none; border: 1px solid #999999; background-color: #EEEEEE; position: absolute; top: 165.567px; left: 799.8px; z-index: 500;">
            <ul>
                <li>Extend</li>
                <li>Draft</li>
                <li>Access Required &amp; Arranged</li>
                <li>Access Required NOT Arranged</li>
                <li>Chargeable</li>
                <li>Do not move</li>
                <li>Day Rate</li>
                <li class="no-op" data-event-property="textColor">
                    Text
                    <div class="color-swab" style="background-color: #000000;"></div>
                    <div class="color-swab" style="background-color: #D0CECE;"></div>
                    <div class="color-swab" style="background-color: #FFFFFF;"></div>
                    <div class="color-swab" style="background-color: #FF0201;"></div>
                    <div class="color-swab" style="background-color: #00B050;"></div>
                    <div class="color-swab" style="background-color: #0170C0;"></div>
                </li>
                <li class="no-op" data-event-property="backgroundColor">
                    Background
                    <div class="color-swab" style="background-color: #000000;"></div>
                    <div class="color-swab" style="background-color: #D0CECE;"></div>
                    <div class="color-swab" style="background-color: #FFFFFF;"></div>
                    <div class="color-swab" style="background-color: #FCE4D6;"></div>
                    <div class="color-swab" style="background-color: #E2EFDA;"></div>
                    <div class="color-swab" style="background-color: #D9E1F2;"></div>
                </li>
                <li>Edit</li>
                <li>Delete</li>
            </ul>
        </div>

    </div>
</body>
</html>