@using DayPilot.Web.Mvc;
@using DayPilot.Web.Mvc.Events.Scheduler;
@using DayPilot.Web.Mvc.Enums.Scheduler;

@{
    ViewBag.Title = "DayPilot Scheduler for ASP.NET MVC 4";
}

<script src="@Url.Content("~/Scripts/DayPilot/daypilot-all.min.js")" type="text/javascript"></script>

<div id="dp"></div>
<script type="text/javascript">
    var dp = new DayPilot.Scheduler("dp");

    // behavior and appearance
    dp.cellWidth = 40;
    dp.eventHeight = 25;
    dp.headerHeight = 25;


    // view
    dp.startDate = "2017-01-09";  // or just dp.startDate = "2013-03-25";
    //dp.cellGroupBy = "Month";
    dp.scale = "CellDuration";
    //dp.days = dp.startDate.daysInMonth();
    dp.cellDuration = 15; // one day
    dp.businessBeginsHour = "7";
    dp.businessEndsHour = "22";

    dp.timeHeaders = [
    { groupBy: 'Month', format: 'dd MMMM yyyy' },
    { groupBy: 'Hour' },
    { groupBy: 'Cell' }
    ];

    dp.timeFormat = "Clock24Hours";
    dp.showNonBusiness = false;
    dp.treeEnabled = true;

    dp.onBeforeEventRender = function (args) {
        if(args.e.text == "Pracownik")
        {
            args.e.backColor = "#f4c842";
            args.e.barColor = "green";
        }
    };

    dp.rowHeaderColumns = [
      { title: 'Osoba', width: 100 },
      { title: 'Ilość', width: 100 },
      { title: 'Czas', width: 100 }
    ];
    dp.rowHeaderWidthAutoFit = true;
    dp.resources = [
                 {
                     name: "Event 1", id: "E1", columns: [{html: "20"},  {html: "7:00-9:00"}], children: [
                           { name: "Pracownik 1", id: "P1", columns: [{ html: "" }, { html: "7:00-10:00" }] },
                           { name: "Pracownik 2", id: "P2", columns: [{ html: "" }, { html: "7:00-15:00" }] }
                     ]
                 },
                 { name: "Event 2", id: "E2", columns: [{html: "15"},  {html: "11:00-13:00"}], children: [
                          { name: "Pracownik 2", id: "P2", columns: [{ html: "" }, { html: "7:00-15:00" }] },
                          { name: "Pracownik 3", id: "P3", columns: [{ html: "" }, { html: "11:00-16:00" }] }
                     ]
                 },
                 {
                     name: "Event 3", id: "E3", columns: [{html: "30"},  {html: "13:30-15:30"}], children: [
                          { name: "Pracownik 2", id: "P2", columns: [{ html: "" }, { html: "7:00-15:00" }] },
                          { name: "Pracownik 3", id: "P3", columns: [{ html: "" }, { html: "11:00-16:00" }] },
                          { name: "Pracownik 4", id: "P4", columns: [{ html: "" }, { html: "13:30-21:45" }] }
                     ]
                 },
                 { name: "Event 4", id: "E4", columns: [{html: "10"},  {html: "19:00-21:00"}], children: [
                          { name: "Pracownik 4", id: "P4", columns: [{ html: "" }, { html: "13:30-21:45" }] }
                    ]
                 },
    ];

    dp.events.list = [
    {
        start: "2017-01-09T07:00:00",
        end: "2017-01-09T09:00:00",
        id: "1",
        resource: "E1",
        text: ""
    },
    {
        start: "2017-01-09T11:00:00",
        end: "2017-01-09T13:00:00",
        id: "2",
        resource: "E2",
        text: ""
    },
    {
        start: "2017-01-09T13:30:00",
        end: "2017-01-09T15:30:00",
        id: "3",
        resource: "E3",
        text: ""
    },
    {
        start: "2017-01-09T19:00:00",
        end: "2017-01-09T21:00:00",
        id: "4",
        resource: "E4",
        text: ""
    },


    // pracownicy

    //1
    {
        start: "2017-01-09T07:00:00",
        end: "2017-01-09T09:00:00",
        id: "PE1",
        resource: "P1",
        text: "Pracownik",
        join: 1
    },

    //2
    {
        start: "2017-01-09T07:00:00",
        end: "2017-01-09T15:00:00",
        id: "PE2",
        resource: "P2",
        text: "Pracownik",
        join: 2
    },

    //3
    {
        start: "2017-01-09T11:00:00",
        end: "2017-01-09T16:00:00",
        id: "PE3",
        resource: "P3",
        text: "Pracownik",
        join: 3
    },

    //4
    {
        start: "2017-01-09T13:30:00",
        end: "2017-01-09T21:45:00",
        id: "PE4",
        resource: "P4",
        text: "Pracownik",
        join: 4
    }
    ];

    dp.init();

    $(document).ready(function () {
        $("#export-button").click(function (ev) {
            ev.preventDefault();
            var area = $("#area").val();
            var element = dp.exportAs("svg", { area: area }).toElement();
            $("#export").html('').append(element);
        });
        $("#download-button").click(function (ev) {
            ev.preventDefault();
            var area = $("#area").val();
            var ext = $("#file").val();
            dp.exportAs(ext, { area: area }).download();
        });
    });
</script>



<div class="space">
    Widok:
    <select id="area">
        <option value="viewport">Aktualny</option>
        <option value="full">Pełny</option>
    </select>

    Plik:
    <select id="file">
        <option value="png">PNG</option>
        <option value="svg">SVG</option>
        <option value="jpeg">JPEG</option>
    </select>

</div>
<div class="space">
    <a href="#" id="export-button">Pokaż</a>
    <a href="#" id="download-button">Pobierz</a>
</div>

<div id="export"></div>

<script type="text/javascript">
function modal(url) {
    var m = new DayPilot.Modal();
    m.closed = function() {
        if(this.result == "OK") {
            dps.commandCallBack('refresh');
        }
        dps.clearSelection();
    };
    m.showUrl(url);
}
</script>