1:   
   2:  <asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
   3:  <div id="calendars">
   4:  <div id="calendar"></div>
   5:  <div id="minical" style="width:250px;" ></div>
   6:  </div>
   7:   
   8:   
   9:  <button id="test" type="button" ></button>
  10:   
  11:  <script type="text/javascript">
  12:      var cal;
  13:      $(function() {
  14:          
  15:          
  16:          $("#calendar").css("width", "900px");
  17:          $("#calendar").css("margin", "0 auto");
  18:          
  19:          cal = $('#calendar').fullCalendar({             
  20:               eventClick: function(calEvent, jsEvent, view) {
  21:   
  22:                      alert('Event: ' + calEvent.title);
  23:                      alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
  24:                      alert('View: ' + view.name);
  25:   
  26:                      // change the border color just for fun
  27:                      $(this).css('border-color', 'red');
  28:   
  29:                  },
  30:              theme: true,   
  31:              header: {
  32:                  left: 'prev,next today',
  33:                  center: 'title',
  34:                  right: 'month,agendaWeek,agendaDay'
  35:              },
  36:              editable: true,
  37:              eventSources: ["home/getevents"],        
  38:          });
  39:          
  40:          
  41:          var $minical = $("#minical");        
  42:          $minical.datepicker({
  43:              onSelect:function(dateText, inst){               
  44:                 cal.fullCalendar( 'gotoDate', $(this).datepicker("getDate"))
  45:              },
  46:          });
  47:          
  48:          $("#minical").position({
  49:              of:"#calendars",
  50:              my:"left top",
  51:              at:"left top",
  52:              });
  53:   
  54:      });    
  55:      
  56: