scheduler-el.html

<link rel="import" href="../polymer/polymer.html">
<link rel="stylesheet" href="scheduler_8.css">
<script src="../jquery/dist/jquery.slim.min.js"></script>
<script src='daypilot-all.min.js'></script>

<!--
`scheduler-el`
Simple scheduler element using DayPilot library
@demo demo/index.html 
-->

<dom-module id="scheduler-el">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <h2>Hello There [[prop1]]</h2>
    <div id="dp"></div>
  </template>

  <script>
    Polymer({
      is: 'scheduler-el',
      properties: {
        prop1: {
          type: String,
          value: 'scheduler-el',
        },
      },
      
     attached: function() {
        // `attached` fires once the element and its parents have been inserted
        // into a document.
        //
        // This is a good place to perform any work related to your element's
        // visual state or active behavior (measuring sizes, beginning animations,
        // loading resources, etc).
        
        var dp = $(this.shadowRoot).find("#dp").daypilotScheduler({

        // behavior and appearance
        theme : "scheduler_8",
    
        // view
        startDate : new DayPilot.Date("2013-01-01"),  // or just startDate : "2013-03-25";
        cellGroupBy : "Month",
        days : 365,
        cellDuration : 1440, // one day
        
        moveBy : 'Full',
    
        // bubble, sync loading
        // see also DayPilot.Event.data.staticBubbleHTML property
        bubble : new DayPilot.Bubble({
            onLoad: function(args) {
                var ev = args.source;
                args.html = "testing bubble for: " + ev.text();
            }
        }),
    
        contextMenu : new DayPilot.Menu({items: [
    	    	{text:"Show event ID", onclick: function() {alert("Event value: " + this.source.value());} },
    	    	{text:"Show event text", onclick: function() {alert("Event text: " + this.source.text());} },
    	    	{text:"Show event start", onclick: function() {alert("Event start: " + this.source.start().toStringSortable());} },
    	    	{text:"Go to google.com", href: "http://www.google.com/?q={0}"},
    	    	{text:"CallBack: Delete this event", command: "delete"} ,
                    {text:"submenu", items: [
                            {text:"Show event ID", onclick: function() {alert("Event value: " + this.source.value());} },
                            {text:"Show event text", onclick: function() {alert("Event text: " + this.source.text());} }
                        ]
                    }
    	    ]}),
    
        treeEnabled : true,
        rowHeaderWidth : 200,
        resources : [
                     { name: "Room A", id: "A", expanded: true, children:[
                             { name : "Room A.1", id : "A.1" },
                             { name : "Room A.2", id : "A.2" }
                             ] 
                     },
                     { name: "Room B", id: "B" },
                     { name: "Room C", id: "C" }
                    ],
        });
    
        // generate and load events
        for (var i = 0; i < 10; i++) {
            var duration = Math.floor(Math.random() * 6) + 1; // 1 to 6
            var start = Math.floor(Math.random() * 6) - 3; // -3 to 3
    
            var e = new DayPilot.Event({
                start: new DayPilot.Date("2013-03-25T00:00:00").addHours(start),
                end: new DayPilot.Date("2013-03-25T12:00:00").addHours(start).addHours(duration),
                id: DayPilot.guid(),
                resource: "B",
                text: "Event",
                bubbleHtml: "Testing bubble"
            });
            dp.events.add(e);
        }
    
        dp.eventHoverHandling = "Bubble";
        
        // event moving
        dp.onEventMoved = function (args) {
            dp.message("Moved: " + args.e.text());
        };
    
        // event resizing
        dp.onEventResized = function (args) {
            dp.message("Resized: " + args.e.text());
        };
    
        // event creating
        dp.onTimeRangeSelected = function (args) {
            var name = prompt("New event name:", "Event");
            dp.clearSelection();
            if (!name) return;
            var e = new DayPilot.Event({
                start: args.start,
                end: args.end,
                id: DayPilot.guid(),
                resource: args.resource,
                text: name
            });
            dp.events.add(e);
            dp.message("Created");
        };
        
        dp.onEventClicked = function(args) {
            alert("clicked: " + args.e.id());
        };
        
        dp.onTimeHeaderClick = function(args) {
            alert("clicked: " + args.header.start);
        };
        
        dp.init();
        
        dp.scrollTo("2013-03-25");
        
      },
      
    });
  </script>
</dom-module>