Блог

В представлении Razor есть привязанный планировщик Kendo, у которого есть обработчик перемещения. Для некоторых событий, когда они были перемещены, следует исправить конец модели событий. Отладчик Chrome показал конец как измененный, но в обработчике сохранения дата окончания была удалена.

 lt;div class="editor-field"gt;  lt;input type="hidden" name="unittype" id="unittype" value="true" /gt;  lt;tablegt;  lt;trgt;  lt;tdgt;  lt;table style=" margin: 20px;"gt;  lt;trgt;  lt;tdgt;Tarixdənlt;/tdgt;  lt;tdgt;  @(Html.Kendo().DatePickerFor(m=gt;m.StartTime)  .Name("datepickerfrom")  .HtmlAttributes(new { style = "width: 100%", title = "From" })  )  lt;/tdgt;  lt;/trgt;  lt;trgt;  lt;tdgt;Tarixəcənlt;/tdgt;  lt;tdgt;  @(Html.Kendo().DatePickerFor(m =gt; m.EndTime)  .Name("datepickerto")  .HtmlAttributes(new { style = "width: 100%", title = "To" })  )  lt;/tdgt;  lt;/trgt;  lt;/tablegt;  lt;/tdgt;  lt;tdgt;  lt;div style=" margin: 20px;"gt;  @(Html.Kendo().Button()  .Name("readData")  .Content("Təsdiq")  .HtmlAttributes(new { type = "button", id = "readData" })  )  lt;/divgt;   lt;/tdgt;  lt;/trgt;   lt;/tablegt; lt;/divgt;  lt;script type="text/javascript"gt;   function createNewGuid() {  return guid();  }   function getshortdate(value) {  var newValue = new Date(new Date(value).getFullYear(), new Date(value).getMonth(), new Date(value).getDay());  return newValue;  }   function getDetailsData(value) {  return {  _from: $('#datepickerfrom').val(),  _to: $('#datepickerto').val()  };  }  lt;/scriptgt;  lt;divgt;  lt;script id="event-template" type="text/x-kendo-template"gt;  lt;div style="color: black; background-color: #=OcupStatusColor#"gt;  lt;h3gt;#: title #  lt;/divgt;  lt;/scriptgt; lt;/divgt;  lt;divgt;  @(Html.Kendo().Schedulerlt;ReservationScheduleViewModelgt;()  .Name("scheduler")  .DateHeaderTemplate("lt;span class='k-link k-nav-day'gt;#= kendo.toString(date, 'dd-MM-yyyy') #lt;/spangt;")  .Date(Model.Today)  .Height(650)  .StartTime(Model.StartTime)  .EndTime(Model.EndTime)  .MajorTick(1440)  .EventTemplate(  "lt;div class='movie-template' style='color: black; background-color: #=OcupStatusColor#'gt;"    "lt;divgt;#= title #lt;/divgt;"    "lt;/divgt;")  .Views(views =gt;  {  views.TimelineMonthView(timeline =gt;  {  timeline.StartTime(Model.StartTime);  timeline.EndTime(Model.EndTime);  timeline.MajorTick(1440);  timeline.Selected(true);  timeline.EventHeight(10);  });  })  .Editable(editable =gt;  {  editable.TemplateName("SchedulerEditorTemplate");  })  .Timezone("Etc/UTC")  .Group(group =gt; group.Resources("Rooms").Orientation(SchedulerGroupOrientation.Vertical))  .Resources(resource =gt;  {  resource.Add(m =gt; m.RoomID)  .Name("Rooms")  .Title("Room")  .DataSource(ds =gt; ds  .Custom()  .Transport(transport =gt; transport.Read(read =gt; read.Action("Resources", "Reservation")))  .Schema(schema =gt; schema  .Data("Data")  .Total("Total")  .Errors("Errors")  .Model(model =gt;  {  model.Id("Value");  model.Field("Value", typeof(int));  model.Field("Text", typeof(string));  model.Field("Color", typeof(string));  })  )  )  .DataTextField("Text")  .DataValueField("Value")  .DataColorField("Color");  })  .Events(events =gt; events  .DataBound("onDataBound")  .Add("scheduler_add")  .Save("scheduler_save")  .Remove("scheduler_remove")  .Resize("scheduler_resize")  .ResizeEnd("scheduler_resizeEnd")  .Move("scheduler_move")  .MoveEnd("scheduler_moveEnd")  )  .DataSource(d =gt; d  .Model(m =gt;  {  m.Id(f =gt; f.MeetingID);  m.Field(f =gt; f.Title).DefaultValue("No title");  m.RecurrenceId(f =gt; f.RecurrenceID);  })  .Read(read =gt;  {  read.Action("Timeline_Read", "Reservation")  .Data("getDetailsData");  })  .Update("Timeline_Update", "Reservation") ) )  lt;/divgt;  lt;script type="text/javascript"gt;   function CheckOutHour() {  return model().CheckOutHour;  }   function model() {  var mod = @Html.Raw(Json.Encode(Model));  return mod;  }   function onError(e) {  this.cancelChanges();   var errorMessage = "Error has happened!";  if (e.errors) {  for (var error in e.errors) {  errorMessage  = e.errors[error].errors[0]   " ";  }  }   alert(errorMessage);  }   $(document).ready(function () {   $("#readData").on("click", function (e) {  var grid = $("#scheduler").getKendoScheduler();  grid.dataSource.read();  });    });    function GetCurrentDate() {  var sessvar = '@Session["CurrentDate"]'  var curdate = new Date( sessvar);  return curdate;  }   function onDataBound(e) {  var scheduler = e.sender;  var slots = $('.k-scheduler-content td[role=gridcell]');   for (var i = 0; i lt; slots.length; i  = 1) {  var currentSlot = $(slots[i]);  var slotData = scheduler.slotByElement(currentSlot);   if ( slotData.startDate ===  GetCurrentDate()) {  currentSlot.css('background-color', '#F4BC8F');  }  }   var daterow = $(".k-scheduler-date-group");  var timerow = daterow.next();  timerow.hide();  }   function scheduler_resize(e) {   if (eventIsOverlaped(e.start, e.end, e.event, e.resources)) {  this.wrapper.find(".k-marquee-color").addClass("invalid-slot");  e.preventDefault();  }  else {  if (!e.event.AllowEdit)  e.preventDefault();  }  }   function setHours(e) {  var checkOutHour = CheckOutHour();  if (e.start.getHours() !== checkOutHour) e.start.setHours(checkOutHour);  if (e.end.getHours() !== checkOutHour) e.end.setHours(checkOutHour);  }   function scheduler_resizeEnd(e) {   setHours(e);  if (!checkAvailability(e.start, e.end, e.events)) {  e.preventDefault();  }  else {  if (ocuppuedreservationArrivalChanged(e.start, e.event)) {  e.preventDefault();  setTimeout(function () {  alert("You can not change arrival date for occupied reservation.");  }, 0);  }  if (arrivalordepartureDateLessCurrentDate(e.end, e.start, e.event)) {  e.preventDefault();  setTimeout(function () {  alert("You can not change arrival or departure date as less than current date.");  }, 0);  }  //  }  }   function scheduler_move(e) {  if (eventIsOverlaped(e.start, e.end, e.event, e.resources)) {  this.wrapper.find(".k-event-drag-hint").addClass("invalid-slot");  }  else {  if (!e.event.AllowMove)  e.preventDefault();  }  }   function scheduler_moveEnd(e) {  setHours(e);  if (!checkAvailability(e.start, e.end, e.event, e.resources)) {  e.preventDefault();  }  else {  var today = GetCurrentDate();  if (e.event.OcupedID === 2) {  if ((e.start.getMonth() !== today.getMonth() || e.start.getDay() !== today.getDay())) {  e.preventDefault();  setTimeout(function () {  alert("You can move occupied reservation only as start from current date.");  }, 0);  }  else {  

//here I change end and set it from old event and chrome debugger shows as changed

 e.end = e.event.end;  e.event = e.end;  }  }  }  }   function scheduler_add(e) {  if (!checkAvailability(e.event.start, e.event.end, e.event)) {  e.preventDefault();  }  }   function scheduler_save(e) {  if (!checkAvailability(e.event.start, e.event.end, e.event)) {  e.preventDefault();  } //check here e.event.end and it is as dropped and not changed  }   function scheduler_remove(e) {  if (!e.event.AllowDelete)  e.preventDefault();   }    function occurrencesInRangeByResource(start, end, resourceFieldName, event, resources) {  var scheduler = $("#scheduler").getKendoScheduler();   var occurrences = scheduler.occurrencesInRange(start, end);   var idx = occurrences.indexOf(event);  if (idx gt; -1) {  occurrences.splice(idx, 1);  }   event = $.extend({}, event, resources);   return filterByResource(occurrences, resourceFieldName, event[resourceFieldName]);  }   function filterByResource(occurrences, resourceFieldName, value) {  var result = [];  var occurrence;   for (var idx = 0, length = occurrences.length; idx lt; length; idx  ) {  occurrence = occurrences[idx];  var resourceValue = occurrence[resourceFieldName];   if (resourceValue === value) {  result.push(occurrence);  } else if (resourceValue instanceof kendo.data.ObservableArray) {  if (value) {  for (var i = 0; i lt; value.length; i  ) {  if (resourceValue.indexOf(value[i]) != -1) {  result.push(occurrence);  break;  }  }  }  }  }  return result;  }   function eventIsOverlaped(start, end, event, resources) {  var occurrences = occurrencesInRangeByResource(start, end, "RoomID", event, resources);  if (occurrences.length gt; 0) {  return true;  }  return false;  }   function ocuppuedreservationArrivalChanged(start, event) {  if (event.OcupedID === 2 amp;amp;  event.start !==  start) {  return true;  }  else  return false;  }   function arrivalordepartureDateLessCurrentDate(end, start, event) {  if (( end !==  event.end) amp;amp; ( end lt;  GetCurrentDate())) {  return true;  }  else if (( start !==  event.start) amp;amp; ( start lt;  GetCurrentDate())) {  return true;  }  else  return false;  }   function checkAvailability(start, end, event, resources) {   if (eventIsOverlaped(start, end, event, resources)) {  setTimeout(function () {  alert("This room is not available in this time period.");  }, 0);   return false;  }   return true;  } lt;/scriptgt;