Hi
I am try to prepare a calender in MVC but currently I am facing 2 problems

1 . 2 out of 5 events not showing in Calender

2 . When Press Submit All Events no data submitted to server

can you please assist me what is going wrong

Index.cshtml

@{
    var X = Html.X();
    Layout = null;
}
<script src="~/Content/calenderexample.js"></script>
<script src="~/Content/override.js"></script>
 @Html.X().ResourceManager()

    @(Html.X().CalendarPanel()
        .ID("CalendarPanel1")    
        .Width(800)
        .Height(800)
        .ActiveIndex(2)
        .CalendarStore(
        Html.X().CalendarStore()
        .ID("CalendarStore1")
        .ItemID("CalendarStore1")
        .Calendars(delegate(CalendarModelCollection i)
        {
            i.Add(new CalendarModel { CalendarId = 1, Title = "Meeting" });
            i.Add(new CalendarModel { CalendarId = 2, Title = "Appointment" });
            i.Add(new CalendarModel { CalendarId = 3, Title = "Task" });
            i.Add(new CalendarModel { CalendarId = 4, Title = "Event" });
            i.Add(new CalendarModel { CalendarId = 5, Title = "Other" });
        })
        )
        .EventStore(Html.X().EventStore().ID("EventStore1")
        .Proxy(Html.X().AjaxProxy()
                .Url(Url.Action("CalendarData"))
                .Json(true)
                .Reader(Html.X().JsonReader().Root("data")))
                .Mappings(mapFields =>
                {
                    mapFields.Add(Html.X().ModelField().Name("StartDate").Type(ModelFieldType.Date).Mapping("StartDate"));
                    mapFields.Add(Html.X().ModelField().Name("EndDate").Type(ModelFieldType.Date).Mapping("EndDate"));
                    mapFields.Add(Html.X().ModelField().Name("EventId").Type(ModelFieldType.Auto).Mapping("EventId"));
                    mapFields.Add(Html.X().ModelField().Name("CalendarId").Type(ModelFieldType.Auto).Mapping("CalendarId"));
                    mapFields.Add(Html.X().ModelField().Name("Title").Type(ModelFieldType.Auto).Mapping("Title"));
                    mapFields.Add(Html.X().ModelField().Name("Notes").Type(ModelFieldType.Auto).Mapping("Notes"));
                    mapFields.Add(Html.X().ModelField().Name("IsAllDay").Type(ModelFieldType.Boolean).Mapping("IsAllDay"));
                })
                .Listeners(L=>{
                    L.BeforeSync.Handler = @"Ext.Msg.alert('Sync', 'The EventStore initiates a sync request after that action. The EventStore synchronization is not implemented in that example.'); 
                                                         this.commitChanges();
                                                         return false;";
                })
                
                )
          .MonthView(X.MonthView()
                    .ShowHeader(true)
                    .ShowWeekLinks(true)
                    .ShowWeekNumbers(true))

           .Listeners(l => {
               l.ViewChange.Fn = "App.viewChange";l.ViewChange.Scope = "App";
               l.EventClick.Fn = "App.record.show";l.EventClick.Scope = "App";
               l.DayClick.Fn = "App.dayClick";l.DayClick.Scope = "App";
               l.RangeSelect.Fn = "App.rangeSelect";l.RangeSelect.Scope = "App";
               l.EventMove.Fn = "App.record.move"; l.EventMove.Scope = "App";
               l.EventResize.Fn = "App.record.resize"; l.EventResize.Scope = "App";
               l.EventAdd.Fn = "App.record.addFromEventDetailsForm"; l.EventAdd.Scope = "App";
               l.EventUpdate.Fn = "App.record.updateFromEventDetailsForm"; l.EventUpdate.Scope = "App";
               l.EventDelete.Fn = "App.record.removeFromEventDetailsForm"; l.EventDelete.Scope = "App";   
           })
        )

@(
 X.EventWindow()
    .ID("EventWindow1")
    .Hidden(true)
    .CalendarStoreID("CalendarStore1")
    .Listeners(l => {
        l.EventAdd.Fn = "App.record.add"; l.EventAdd.Scope = "App";
        l.EventUpdate.Fn = "App.record.update"; l.EventUpdate.Scope = "App";
        l.EditDetails.Fn = "App.record.edit"; l.EditDetails.Scope = "App";
        l.EventDelete.Fn = "App.record.remove"; l.EventDelete.Scope = "App";
    })
)

@(X.Button()
   .Text("Save All Events")
   .Icon(Icon.Disk)
   .Handler("App.record.saveAll();"))

calenderexample.js

var App = {
    getCalendar: function () {
        return App.CalendarPanel1;
    },

    getStore: function () {
        return App.EventStore1;
    },

    getWindow: function () {
        return App.EventWindow1;
    },

    viewChange: function (p, vw, dateInfo) {
        var win = this.getWindow();

        if (win) {
            win.hide();
        }

        if (dateInfo) {
            // will be null when switching to the event edit form, so ignore
            this.DatePicker1.setValue(dateInfo.activeDate);
            this.updateTitle(dateInfo.viewStart, dateInfo.viewEnd);
        }
    },

    updateTitle: function (startDt, endDt) {
        var msg = '',
            fmt = Ext.Date.format;

        if (Ext.Date.clearTime(startDt).getTime() == Ext.Date.clearTime(endDt).getTime()) {
            msg = fmt(startDt, 'F j, Y');
        } else if (startDt.getFullYear() == endDt.getFullYear()) {
            if (startDt.getMonth() == endDt.getMonth()) {
                msg = fmt(startDt, 'F j') + ' - ' + fmt(endDt, 'j, Y');
            } else {
                msg = fmt(startDt, 'F j') + ' - ' + fmt(endDt, 'F j, Y');
            }
        } else {
            msg = fmt(startDt, 'F j, Y') + ' - ' + fmt(endDt, 'F j, Y');
        }

        this.Panel1.setTitle(msg);
    },

    setStartDate: function (picker, date) {
        this.getCalendar().setStartDate(date);
    },

    rangeSelect: function (cal, dates, callback) {
        this.record.show(cal, dates);
        this.getWindow().on('hide', callback, cal, { single: true });
    },

    dayClick: function (cal, dt, allDay, el) {
        this.record.show.call(this, cal, {
            StartDate: dt,
            IsAllDay: allDay
        }, el);
    },

    record: {
        addFromEventDetailsForm: function (win, rec) {
            App.ShowMsg('Event ' + rec.data.Title + ' was added');
        },

        add: function (win, rec) {
            win.hide();
            App.getStore().add(rec);
            App.getStore().sync();
            App.ShowMsg('Event ' + rec.data.Title + ' was added');
        },

        updateFromEventDetailsForm: function (win, rec) {
            App.ShowMsg('Event ' + rec.data.Title + ' was updated');
        },

        update: function (win, rec) {
            win.hide();
            rec.commit();
            App.getStore().sync();
            App.ShowMsg('Event ' + rec.data.Title + ' was updated');
        },

        removeFromEventDetailsForm: function (win, rec) {
            App.ShowMsg('Event ' + rec.data.Title + ' was deleted');
        },

        remove: function (win, rec) {
            App.getStore().remove(rec);
            App.getStore().sync();
            win.hide();
            App.ShowMsg('Event ' + rec.data.Title + ' was deleted');
        },

        edit: function (win, rec) {
            win.hide();
            rec.commit();
            App.getCalendar().showEditForm(rec);
        },

        resize: function (cal, rec) {
            rec.commit();
            App.ShowMsg('Event ' + rec.data.Title + ' was updated');
        },

        move: function (cal, rec) {
            rec.commit();
            App.ShowMsg('Event ' + rec.data.Title + ' was moved to ' + Ext.Date.format(rec.data.StartDate, 'F jS' + (rec.data.IsAllDay ? '' : ' \\a\\t g:i a')));
        },

        show: function (cal, rec, el) {
            App.getWindow().show(rec, el);
        },

        saveAll: function () {
            App.getStore().submitData({
                mappings: false
            });
        }
    }
};

override.js

Ext.apply(App.record, {
    saveAll : function () {        
         Ext.net.directRequest({
        
             url: "calender/SaveAll" ,
            json : true,
            cleanRequest: true,
            
            extraParams  : {
                events: App.getStore().getRecordsValues()
            }
        });
    }
});
Controller

[DirectController]
    public class calenderController : Controller
    {
        //
        // GET: /calender/

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult CalendarData()
        {
            var now = DateTime.Now.Date;
            List<dynamic> d = new List<dynamic>();
            for (int i = 1; i <= 5; i++)
            {
                var query =
                    new
                    {
                        EventId = i,
                        CalendarId = i,
                        Title = "Sample "+i.ToString(),
                        StartDate = DateTime.Now.AddDays(i),
                        EndDate = DateTime.Now.AddDays(i),
                        IsAllDay = true,
                        Notes = "This is a sample "+i.ToString()
                    };
                d.Add(query);
            }

            return this.Store(d);
            //return new AjaxResult() { Result = query };
        }

        [DirectMethod]
        public void SaveAll(string events)
        {
          
        }

       
    }