<%@language = "javascript" %>
<% /*
    $Revision$
    $Id$

    File:               shared/fullcalendar.asp
    Description:        Toont een standaard calendar met daarin de events gepresenteerd
                        zoals die door de "worker" worden opgeleverd.
                        Die worker levert JSON gegevens op die dynamisch worden opgehaald.

    Context:
    Notes:              De toegestane workers zijn hier gewhitelist.

*/
DOCTYPE_Disable = 1;
THIS_FILE = "appl/shared/fullcalendar.asp";
%>
<!--#include file="../Shared/common.inc" -->
<!--#include file="../Shared/iface.inc" -->
<%
 var pworker = getQParamSafe("worker");

 var lworker = "";
 var defaultView = getQParamSafe("calendarview", "month");
 // whitelist tevens vertaaltabel
 switch (pworker)
 {
    case "faclist" : lworker = "../fac/fac_list_worker.asp?"+Request.QueryString(); break;
    case "mldlist" : lworker = "../mld/mld_melding_worker.asp?bk="+getQParamInt("bk",-1)+"&disc="+getQParamInt("disc",-1)
                             + "&stdm=" + getQParamInt("stdm", -1);
                     break;
    case "mldtag"  : lworker = "../mld/mld_melding_tag_worker.asp?"+Request.QueryString(); break;
    case "opdrlist": lworker = "../mld/mld_opdr_worker.asp"; break;
    case "reslist" : lworker = "../res/res_fe_worker.asp?"+Request.QueryString(); break;
    case "report"  : lworker = "../fac/fac_report_calworker.asp?usrrap_key=" + getQParamInt("rap_key", -1)
                                    + "&coltitle=" + getQParamSafe("coltitle", "title")
                                    + "&colurl=" + getQParam("colurl", "");
                     break;
    case "calendar": lworker = "../fac/fac_report_calworker.asp?1=1" + transitQS();
                     break;
}

 FCLTHeader.Requires({plugins: ["jQuery"],
                      js:      ["date.js", "jQuery-ui.js", "../Localscripts/fullcalendar/fullcalendar.min.js"],
                      css:     ["../Localscripts/fullcalendar/fullcalendar.css"]});
%>
<html>
<head>
<%
    FCLTHeader.Generate()
%>
    <style>
        .loading
        {
            padding: 10px;
            font-size: 1em;
            line-height: 1.9em;
        }
        .refresh-button {
            transition: background-position 0.1s linear;
        }
        .refresh-button:hover,
        .refresh-button:active {
            background-color: #E6E6E6;
            color: #333333;
        }
        .refresh-button:hover {
            text-decoration: none;
            background-position: 0 -15px;
        }
        .refresh-button:active {
            background-color: #cccccc;
            background-image: none;
            outline: 0;
            box-shadow: inset 0 2px 4px rgb(0 0 0 / 15%), 0 1px 2px rgb(0 0 0 / 5%);
        }
    </style>
    <script type='text/javascript'>
        var events = [];
        var calendar;

        $(function() {

          calendar =
            $('#calendar').fullCalendar({
                events: "<%=lworker%>",
                defaultView: "<%=(inArray(defaultView, ["basicWeek", "agendaWeek"]) ? defaultView : "month")%>",
                firstDay : 1,
                minTime: 7,
                weekMode: 'liquid',
                header: {
                    left: 'today',
                    center: 'prev title next',
                    right: 'month,<%=defaultView.substring(0, 5) == "basic" ? "basicWeek" : "agendaWeek"%>'
                },
                editable: false,
                timeFormat: 'H:mm',
                axisFormat: 'H:mm',
                buttonText: {
                    prev:     '&nbsp;&#9668;&nbsp;',  // left triangle
                    next:     '&nbsp;&#9658;&nbsp;',  // right triangle
                    prevYear: '&nbsp;&lt;&lt;&nbsp;', // <<
                    nextYear: '&nbsp;&gt;&gt;&nbsp;', // >>
                    today:    L("lcl_today"),
                    month:    L("lcl_month"),
                    week:     L("lcl_week"),
                    day:      L("lcl_day")
                },
                columnFormat: {
                    month: 'ddd',    // Mon
                    week: 'ddd d MMM', // Mon 9/7
                    day: 'dddd d MMM'  // Monday 9/7
                },
                titleFormat: {
                    month: 'MMMM yyyy',                             // September 2009
                    week: "d[ MMM][ yyyy]{ '&#8211;' d  MMM yyyy}", // 7 - 13 Sep 2009
                    day: 'dddd d MMMM yyyy'                        // Dinsdag 8 Sep 2009
                },
                dayNames: calendar_names.days,
                dayNamesMin: calendar_names.daysMin,
                dayNamesShort: calendar_names.daysMin,
                monthNamesShort: calendar_names.monthsShort,
                monthNames: calendar_names.months,
                weekMin: calendar_names.weekMin,
                eventClick: function(evt) {
                    if (evt.fclturl) {
                        FcltMgr.openDetail(evt.fclturl, evt.fclturltitle || undefined);
                    }
                },
                loading: onLoad,
                dayClick: function() {
                },
                height: $(window).height()
            });

            function onLoad(isLoading, view) {
                if (!$("span.loading").length)
                    $("td.fc-header-left").append("<span class='loading'>" + L("lcl_shared_loading") + "</span>");
                $("span.loading").css('visibility', isLoading?'visible':'hidden');
<%          if (pworker == "calendar") { %>
                if (!window?.init && !isLoading) {
                    init = true; // Alleen de eerste keer (!init) dat we klaar zijn met laden (!isLoading)
                    let title = $('#calendar').fullCalendar('clientEvents')[0];
                    if (typeof title === "string") {
                        FcltMgr.setTitle(title);
                    }
                    FcltMgr.resized();
                    var future_events = $('#calendar').fullCalendar('clientEvents', function (a) { return a.start > new Date(); });
                    if (future_events.length) {
                        $('#calendar').fullCalendar('gotoDate', future_events[0].start); // Ga direct naar het eerste event als dat in de toekomst ligt
                    }
                }
<%          } %>
            }

            if(calendar) {
                $(window).resize(function() {
                    var calHeight = $(window).height();
                    $('#calendar').fullCalendar('option', 'height', calHeight);
                });

                $("td.fc-header-right").prepend('<span class="refresh-button fc-button fc-corner-left fc-corner-right fc-state-default" onclick="calendar.fullCalendar(\'refetchEvents\')">' + L("lcl_refresh") + '</span>&nbsp;');
            };
        });

    </script>
</head>

<body>
<div id="calendar"></div>
</body>
</html>
<% ASPPAGE_END(); %>
