How to add event in Calendar control

Asked by Manish
10 years ago.

Hello,

We are having problem in using the DayPilot Calendar Control in our Mvc application. We are trying to add events on the calendar control, but it is not working at all. Here I am posting my codes.

<div class="row" id="DayDiv">
<div class="col-md-12">
<div class="form-group">
@Html.DayPilotCalendar("dpm", new DayPilotCalendarConfig
{
BackendUrl = Url.Content("~/Calendar/Backend"),
ViewType = DayPilot.Web.Mvc.Enums.Calendar.ViewType.Day,
StartDate = DateTime.Now,
CellDuration=24,
TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Calendar.TimeRangeSelectedHandlingType.CallBack,
EventClickHandling = DayPilot.Web.Mvc.Events.Calendar.EventClickHandlingType.JavaScript,
EventClickJavaScript = "editEvent()"

})
</div>
</div>
</div>

function editEvent() {
alert("manish");
}

This event is not at all firing. The alert message is not showing.

Please tell me where I am missing the things.

With Regards
Manish

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

Please take a look at the following tutorial:

http://code.daypilot.org/59860/asp-net-mvc-5-event-calendar

It shows how to use the Calendar control in MVC. It uses the Pro version but the same approach works for the Lite version.

In short, you need to use TimeRangeSelectedHandling and TimeRangeSelectedJavaScript properties to handle event creating:

MVC View

@Html.DayPilotCalendar("dp", new DayPilotCalendarConfig
{
    BackendUrl = Url.Action("Backend", "Calendar"),
    ViewType = ViewType.Week,
    TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript,
    TimeRangeSelectedJavaScript = "create(start, end)"
})

JavaScript - create() method

<script type="text/javascript">

    function create(start, end) {
        var m = new DayPilot.Modal();
        m.closed = function () {
            if (this.result == "OK") {
                dp.commandCallBack('refresh');
            }
            dp.clearSelection();
        };
        m.showUrl('@Url.Action("Create", "Event")?start=' + start + '&end=' + end);
    }

</script>

This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.