Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 141086 | Nov 23,2018 02:36 AM UTC | Dec 6,2018 10:39 AM UTC | ASP.NET MVC - EJ 2 | 13 |
|
Tags: Schedule |
|
@(Html.EJ().Schedule("Schedule1")
.Width("100%").Height("525px").CurrentDate(new DateTime(2016, 11, 18))
.Locale("th-TH").ShowTimeZoneFields(false)
.ScheduleClientSideEvents(evt => evt.BeforeAppointmentCreate("renderingCustom")
.BeforeAppointmentChange("renderingCustom").ResizeStop("renderingCustom").DragStop("renderingCustom"))
.Resources(res =>
{
res.Field("OwnerId").Title("Owner").Name("Owners").AllowMultiple(true)
.ResourceSettings(flds => flds.Datasource((System.Collections.IEnumerable)ViewBag.Owners).Text("text").Id("id").GroupId("groupId").Color("color")).Add();
})
.Group(gr =>
{
gr.Resources(ViewBag.Resources);
})
.AppointmentSettings(fields => fields.Datasource(ViewBag.dataSource)
.ApplyTimeOffset(false)
.Id("Id")
.Subject("Subject")
.StartTime("StartTime")
.EndTime("EndTime")
.Description("Description")
.AllDay("AllDay")
.Recurrence("Recurrence")
.RecurrenceRule("RecurrenceRule")
.ResourceFields("OwnerId"))
) |
|
function renderingCustom(args) {
var schObj = $("#Schedule1").ejSchedule('instance');
if (ej.isNullOrUndefined(args.appointment[0]))
app = args.appointment;
else
app = args.appointment[0];
if (args.type == "beforeAppointmentChange")
app = args.appointment.changed[0];
var count = overlap(app, args.type);
if (args.type != "resizeStop" && args.type != "dragStop" && count > 0) {
args.cancel = (count > 0);
} else if (count > 1) {
args.cancel = (count > 1);
}
}
function overlap(app, type) {
var obj = $("#Schedule1").ejSchedule('instance');
var startDate = app[obj._appointmentSettings["startTime"]];
var endDate = app[obj._appointmentSettings["endTime"]];
var resourceId = app["OwnerId"];
var predicate = ej.Predicate(obj._appointmentSettings["startTime"], ej.FilterOperators.greaterThanOrEqual, startDate).
and(ej.Predicate(obj._appointmentSettings["endTime"], ej.FilterOperators.greaterThanOrEqual, startDate)).
and(ej.Predicate(obj._appointmentSettings["startTime"], ej.FilterOperators.lessThan, endDate)).
or(ej.Predicate(obj._appointmentSettings["startTime"], ej.FilterOperators.lessThanOrEqual, startDate).
and(ej.Predicate(obj._appointmentSettings["endTime"], ej.FilterOperators.greaterThan, startDate)));
var filterApp = new ej.DataManager(obj._processed).executeLocal(new ej.Query().where(predicate));
if (obj._tempResource.length > 0) {
var resPredicate = ej.Predicate(obj._appointmentSettings["resourceFields"], ej.FilterOperators.contains, resourceId);
var filterResApp = new ej.DataManager(filterApp).executeLocal(new ej.Query().where(resPredicate));
}
var overlapCount = 0;
if (obj._tempResource.length > 0) {
overlapCount = (type == "beforeAppointmentChange" && filterResApp.length == 1 && filterResApp[0].Id == app.Id) ? 0 : filterResApp.length;
}
else {
overlapCount = filterApp.length
}
return overlapCount;
} |
Thanks for your update.Regards,Karthigeyan
|
.AppointmentSettings(fields => fields.Datasource(ds => ds.URL("/Home/GetData").CrudURL("/Home/Batch").Adaptor("UrlAdaptor"))
.ApplyTimeOffset(false)
.Id("Id")
.Subject("Subject")
.StartTime("StartTime")
.EndTime("EndTime")
.Description("Description")
.AllDay("AllDay")
.Recurrence("Recurrence")
.RecurrenceRule("RecurrenceRule")
.ResourceFields("OwnerId")) |
|
// To disable quick window on both cell and appointment click
.ShowQuickWindow(true)
// To disable quick window only on appointment click
.AppointmentClick("onClick") // client event
function onClick(args) {
args.cancel = true;
} |
|
.AppointmentWindowOpen("onAppointmentOpen")
function onAppointmentOpen(args) {
if ($("#customfields").length == 0 && !ej.isNullOrUndefined(args.appointment)) {
var customDesign = "<tr id='customfields'><td><input type='button' id='URL' name='URL' value='URL' onclick='ok()' /></td></tr>";
$("#Schedule1_AddEditForm").after(customDesign);
$("#URL").ejButton({ showRoundedCorner: true, width: "100px", size: "medium" });
} else {
this._appointmentAddWindow.find("#URL").css("display", "none");
}
}
function ok() {
//var obj = $("#Schedule1").data("ejSchedule");
alert('URL button clicked')
} |
|
public JsonResult Batch(EditParams param)
{
if (param.action == "insert" || (param.action == "batch" && param.added != null)) // this block of code will execute while inserting the appointments
{
--------------
db.Appointments.InsertOnSubmit(appoint);
db.SubmitChanges();
}
if (param.action == "remove" || param.deleted != null) // this block of code will execute while removing the appointment
{
--------------
db.SubmitChanges();
}
if ((param.action == "batch" && param.changed != null) || param.action == "update") // this block of code will execute while updating the appointment
{
--------------
db.SubmitChanges();
}
// here user can be notified
IEnumerable data = new DataClasses1DataContext().Appointments.Take(500); return Json(data, JsonRequestBehavior.AllowGet);
} |
|
.ScheduleClientSideEvents(evt => evt.BeforeAppointmentCreate("renderingCustom").AppointmentClick("onClick").QueryCellInfo("customDay")
.Create("customName").ActionComplete("customName").AppointmentWindowOpen("onAppointmentOpen").BeforeAppointmentChange("renderingCustom").ResizeStop("renderingCustom").DragStop("renderingCustom"))
.AppointmentSettings(fields => fields.Datasource(ds => ds.URL("/Home/GetData").CrudURL("/Home/Batch").Adaptor("UrlAdaptor"))
.ApplyTimeOffset(false)
.Id("Id")
.Subject("Subject")
.StartTime("StartTime")
.EndTime("EndTime")
.Description("Description")
.AllDay("AllDay")
.Recurrence("Recurrence")
.RecurrenceRule("RecurrenceRule")
.ResourceFields("OwnerId")) |
|
.CellWidth("80px")
.CellHeight("80px")
.DateHeaderTemplateId("#dateTemplate")
<script id="dateTemplate" type="text/x-jsrender">
<div>{{:~dTemplate(date)}}</div>
</script>
function _dateFormat(date) {
var obj = $("#Schedule1").ejSchedule("instance");
var dFormat = ej.format(new Date(date), "dddd dd", obj.model.locale);
return dFormat;
}
$.views.helpers({ dTemplate: _dateFormat }); |
|
.ScheduleClientSideEvents(evt => evt.BeforeAppointmentCreate("renderingCustom").AppointmentClick("onClick").QueryCellInfo("customDay") .Create("customName").ActionComplete("customName").AppointmentWindowOpen("onAppointmentOpen").BeforeAppointmentChange("renderingCustom").ResizeStop("renderingCustom").DragStop("renderingCustom"))
function customName(args) {
var obj = $("#Schedule1").ejSchedule("instance");
if (obj.model.orientation == "vertical" && obj.currentView() == "month" && (args.requestType == "viewNavigate" || args.requestType == "dateNavigate" || args.type == "create")) {
var rowIndex = (this.model.showWeekend) ? 7 : this.model.workWeek.length;
var timeCellIndex = 0;
for (var i = 0; i < obj._dateRender.length; i++) {
if ((i + 1) % rowIndex == 0) {
if (obj.model.showNextPrevMonth || obj.currentView() == "customview") {
start = ej.format(new Date(obj._dateRender[i - (rowIndex - 1)]), "MMMM dd", obj.model.locale);
end = ej.format(new Date(obj._dateRender[i]), "MMMM dd", obj.model.locale);
}
if (this.model.timeScale.enable) this.element.find(".e-timecelldivs").eq(timeCellIndex).html(start + " - " + end);
timeCellIndex++;
}
}
}
}
function customDay(args) {
var obj = $("#Schedule1").ejSchedule("instance");
if (obj.model.orientation == "vertical" && obj.currentView() == "month" && args.requestType == "headercells") {
args.element.find(".e-headerdaydisplay").html(this._culture.calendar.days.names[this._culture.calendar.days.namesAbbr.indexOf(args.currentDay)]);
}
} |
|
function customName(args) {
var obj = $("#Schedule1").ejSchedule("instance");
if (obj.model.orientation == "vertical" && (args.requestType == "viewNavigate" || args.requestType == "dateNavigate" || args.type == "create")) {
if (obj.currentView() == "month") {
var rowIndex = (this.model.showWeekend) ? 7 : this.model.workWeek.length;
var timeCellIndex = 0;
for (var i = 0; i < obj._dateRender.length; i++) {
if ((i + 1) % rowIndex == 0) {
if (obj.model.showNextPrevMonth || obj.currentView() == "customview") {
start = ej.format(new Date(obj._dateRender[i - (rowIndex - 1)]), "MMMM dd", obj.model.locale);
end = ej.format(new Date(obj._dateRender[i]), "MMMM dd", obj.model.locale);
}
if (this.model.timeScale.enable) this.element.find(".e-timecelldivs").eq(timeCellIndex).html(start + " - " + end);
timeCellIndex++;
}
}
temp = ej.format(obj.currentDate(), "MMM", obj.model.locale) + (new Date(obj.dateRender[0]).getFullYear() + 543).toString();
}
if (obj.currentView() == "day") {
temp = ej.format(new Date(obj.dateRender[0]), "d MMM", obj.model.locale) + (new Date(obj.dateRender[obj.dateRender.length - 1]).getFullYear() + 543).toString();
}
if (obj.currentView() == "week" || obj.currentView() == "workweek") {
temp = ej.format(new Date(obj.dateRender[0]), "d MMM", obj.model.locale) + " - " + ej.format(new Date(obj.dateRender[obj.dateRender.length - 1]), "d MMM", obj.model.locale) + (new Date(obj.dateRender[obj.dateRender.length - 1]).getFullYear() + 543).toString();
}
$(".e-datedisplay").html(temp);
}
} |
.AppointmentWindowOpen("onAppointmentOpen") function onAppointmentOpen(args) { if ($("#customfields").length == 0 && !ej.isNullOrUndefined(args.appointment)) { var customDesign = " 'ok()' /> | $("#Schedule1_AddEditForm").after(customDesign); $("#URL").ejButton({ showRoundedCorner: true, width: "100px", size: "medium" }); } else { this._appointmentAddWindow.find("#URL").css("display", "none"); } } function ok() { //var obj = $("#Schedule1").data("ejSchedule"); alert('URL button clicked') } |
Thanks for your update.Please find the below sample and responses for your queries.
- ApplyTimeOffset and AppointmentClick are not defined correctly which is the cause for the issue. Kindly refer the below code example.
- Day name can be customized using template option in all views except month as shown below.
- In month view, day and month name can be customized using QueryCellInfo, Create and ActionComplete events as shown below
- Year can be customized using Create and ActionComplete events as shown below.
Year number Mismatch. correct 2561 but show 2018
|
.AppointmentWindowOpen("onAppointmentOpen")
function onAppointmentOpen(args) {
this._appointmentAddWindow.find(".allday").ejCheckBox({ checked: false });
if ($("#customfields").length == 0) {
var customDesign = "<tr id='customfields'><td><input type='button' id='URL' name='URL' value='URL' onclick='ok()' /></td></tr>";
$("#Schedule1_AddEditForm").after(customDesign);
$("#URL").ejButton({ showRoundedCorner: true, width: "100px", size: "medium" });
}
if(!ej.isNullOrUndefined(args.appointment)){
this._appointmentAddWindow.find("#URL").css("display", "block");
}
else {
this._appointmentAddWindow.find("#URL").css("display", "none");
}
} |
|
<script type="text/javascript">
// Uncheck allday field
ej.Schedule.prototype._alldayCheck = function (appointments) {
var proxy = this;
proxy._appointmentAddWindow.find(".allday").ejCheckBox({ checked: false });
}
</script> |
|
@(Html.EJ().Schedule("Schedule1")
…………….
.AgendaViewSettings(agenda => agenda.DateColumnTemplateId("#dateTemplates"))
.ScheduleClientSideEvents(evt => evt.BeforeAppointmentCreate("renderingCustom").AppointmentClick("onClick").QueryCellInfo("customDay")
.Create("customName").ActionComplete("customName").AppointmentWindowOpen("onAppointmentOpen").BeforeAppointmentChange("renderingCustom").ResizeStop("renderingCustom").DragStop("renderingCustom"))
…………….
)
=
<!-- Template for date column -->
<script id="dateTemplates" type="text/x-jsrender">
<div style="height:100%">
<div>
<div>{{:~dateDisplay(StartTime)}}</div>
</div>
</div>
</script>
<script type="text/javascript">
// To Change the year in agenda view
function _getDate(date) {
var dateCol = new Date(date);
return dateCol.toLocaleDateString("th-TH");
}
$.views.helpers({
dateDisplay: _getDate,
});
// To Change the year in Calendar
ej.Schedule.prototype._viewCalendar = function () {
var proxy = this;
if (!(((!ej.isNullOrUndefined(proxy.model.renderDates) && $.type(proxy.model.renderDates) == "array" && proxy.model.renderDates.length > 0) || proxy._resCustomView) && proxy.currentView() === "customview")) {
var obj = proxy.element.find("#" + proxy._id + "_navigator").data("ejDatePicker");
if (obj) {
obj.show();
proxy.element.find("#" + proxy._id + "_navigator").ejDatePicker({ value: new Date(proxy.currentDate()) });
var controlmargin = proxy.element.offset();
if (proxy.model.enableRTL) {
var leftvalue = controlmargin.left + proxy.element.width() - 280;
if (leftvalue < 0) leftvalue = 0;
}
else {
var leftvalue = controlmargin.left + 55, winWidth = $(document).scrollLeft() + $(window).width();
if ((winWidth - leftvalue) < $("#e-" + proxy._id + "_navigator").width())
leftvalue = winWidth - $("#e-" + proxy._id + "_navigator").width();
}
$("#e-" + proxy._id + "_navigator").css({ top: (controlmargin.top + 47) + "px", left: leftvalue + "px" });
}
proxy.element.find(".e-workcells").removeClass("e-selectedCell").removeClass("e-mousehover");
proxy.element.find(".e-appointment,.e-alldayappointment,.e-monthappointment").removeClass("e-selectedAppointment");
changeValue(new Date(proxy.currentDate()));
}
}
function changeValue(value) {
var element = $('#e-Schedule1_navigator').find('.e-datepicker-headertext')[0].innerHTML;
var val = value.toLocaleDateString("th-TH");
var text = element.split(' ')[0] + ' ' + val.split('/')[2];
$('#e-Schedule1_navigator').find('.e-datepicker-headertext')[0].innerHTML = text;
}
function customName(args) {
// To Change the year in calendar navigation
this.element.find("#" + this._id + "_navigator").ejDatePicker({
navigate: function (val) {
changeValue(val.date);
},
});
}
|
|
.AppointmentTemplateId("#apptemplate")
<script id="apptemplate" type="text/x-jsrender">
{{if View == "month" && StartTime.getHours() >= 12 }}
<div style="height:100%; background-color:blue">
<div style='float:left;'>{{:~format(StartTime,"strTime") }}</div>
<div style='float:left; '>{{:~format(EndTime,"endTime")}}</div><br>
<div>{{:Subject}}</div>
</div>
{{else}}
<div style="height:100%">
<div style='float:left; '>{{:~format(StartTime,"strTime")}}</div>
<div style='float:left; '>{{:~format(EndTime,"endTime")}}</div> <br>
<div>{{:Subject}}</div>
</div>
{{/if}}
</script> |
|
function onAppointmentOpen(args) {
this._appointmentAddWindow.find(".allday").ejCheckBox({ checked: false });
this._appointmentAddWindow.find(".Schedule1parrow").css("display", "none");
if ($("#customfields").length == 0) {
var customDesign = "<tr id='customfields'><td><input type='button' id='URL' name='URL' value='URL' onclick='ok()' /></td></tr>";
$("#Schedule1_AddEditForm").after(customDesign);
$("#URL").ejButton({ showRoundedCorner: true, width: "100px", size: "medium" });
}
if(!ej.isNullOrUndefined(args.appointment)){
this._appointmentAddWindow.find("#URL").css("display", "block");
}
else {
this._appointmentAddWindow.find("#URL").css("display", "none");
}
} |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
