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.
BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
|
@(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");
}
} |
