Aug 12, 2015, 9:14 AM
Calender : Problem To Dispay Events and Submit values
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
calenderexample.js
override.js
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)
{
}
}