search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

How to show Event Calendar from jquery

Asked by Johnny Gonzalez
6 years ago.

I don't know if I'm doing something wrong, but I can't display the event calendar from jquery

<script src="~/Scripts/DayPilot/daypilot-all.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready$(function () {
$("#dpc_jquery").dayPilotCalendar({

cssClassPrefix: "calendar_silver_",
EventResizeHandling: "CallBack",
EventMoveHandling: "CallBack",
TimeRangeSelectedHandling: "JavaScript",
HeaderDateFormat: "dd/MM/yyyy"

});
});

</script>

<table>
<tr>
<td valign="top">
<div id="datepicker"/>
</td>
<td valign="top" style="width:1000px;">
<div id="dpc_jquery"/>
</td>
</tr>
</table>

Answer posted by Dan Letecky [DayPilot]
6 years ago.

Please see the doc for jQuery calendar plugin:

http://doc.daypilot.org/calendar/jquery/

Your example would look like this:

<link type="text/css" rel="stylesheet" href="themes/calendar_white.css" />
<script type="text/javascript">
$(document).ready$(function () { 
  $("#dpc_jquery").daypilotCalendar({  // note the case
    cssClassPrefix: "calendar_white",   // you used a legacy theme that would require cssOnly:false
    eventResizeHandling: "CallBack", 
    eventMoveHandling: "CallBack", 
    timeRangeSelectedHandling: "JavaScript", 
    headerDateFormat: "dd/MM/yyyy"
  }); 
});
</script>

If you are going to use it in MVC you also need to add backendUrl property:

<script type="text/javascript">
$(document).ready$(function () { 
  $("#dpc_jquery").daypilotCalendar({
    backendUrl: '<%= ResolveUrl("~/Calendar/Backend") %>', 
    cssClassPrefix: "calendar_white", 
    eventResizeHandling: "CallBack", 
    eventMoveHandling: "CallBack", 
    timeRangeSelectedHandling: "JavaScript", 
    headerDateFormat: "dd/MM/yyyy"
  }); 
});
</script>
This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.