DayPilot Lite for Java » Demo

Source

<script type="text/javascript">

  $(document).ready(function() {
    var dpn = $("#dpn").daypilotNavigator({
      bound : "dpc",
      selectMode : 'week',
      cssOnly : true,
      cssClassPrefix : "navigator_green",
      weekStarts : 0,
      showWeekNumbers : true,
      showMonths : 3,
      skipMonths : 3
    });

    var dpc = $("#dpc").daypilotCalendar({
      backendUrl : '../dpc',
      cssOnly : true,
      cssClassPrefix : "calendar_green",
      viewType : "Week",
      heightSpec : 'BusinessHours',
      height : 200,
      timeRangeSelectedHandling : 'CallBack',
      eventMoveHandling : 'CallBack',
      eventResizeHandling : 'CallBack',
      eventDeleteHandling : 'CallBack',
      eventClickHandling : 'Edit',
      eventEditHandling : 'CallBack',
      eventArrangement : "Full",
      showAllDayEvents : true,
      bubble : new DayPilotBubble.Bubble({ cssClassPrefix: "bubble_default" } ),
      showToolTip : false,
      initScrollPos : 9 * 40 + 1, 
      moveBy : "Top",
      eventRightClickHandling : "ContextMenu",
      contextMenu : new DayPilot.Menu([
        {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"} 
      ])
    });
  });

</script>