We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Maximize productivity with
30% off* for a limited time
using BOOSTDEV30.
Includes 3- and 5-packs.
*Some exclusions may apply.
New Product LaunchBoldDesk: Help desk ticketing software starts at $10 for 3 agents.
Try it for free.|
@(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");
}
} |
