javascript fullcalendar datetime被搞砸了 [英] javascript fullcalendar datetime is messed up
本文介绍了javascript fullcalendar datetime被搞砸了的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在学习关于在asp.net MVC5中制作日历调度程序的教程：
http://www.dotnetawesome.com/2017/07/curd-operation-on-fullcalendar-in-aspnet-mvc.html p>
我无法理解日期时间是如何传递的，以及它为什么显示数据库中的最小值（就好像值为空因为留空）：具体地说，它被设置到1/1/0001 12:00:00 AM在数据库中。
我已经研究了堆栈溢出的各种答案，但不知道如何或我需要什么更改为将datetime设置为非空值。
非常感谢任何帮助。
这里是在我的索引视图中的JavaScript
< script>
$（document）.ready（function（）{
var events = [];
var selectedEvent = null;
FetchEventAndRenderCalendar（）;
FetchEventAndRenderCalendar（） {
events = [];
$ .ajax（{
类型：GET，
url：/ home / GetEvents，
success：function数据）{
$ .each（data，function（i，v）{
events.push（{
eventID：v.EventID，
title：v.Subject，
description：v.Description，
start：moment（v.Start），
end：v.End！= null？moment（v.End）：null，
color： v.ThemeColor，
allDay：v.IsFullDay
}）;
}）
GenerateCalender（events）;
}，
错误：函数（错误）{
alert（'failed'）;
函数GenerateCalender（事件）{
$（'＃calender'）。fullCalendar（'destroy'）;
$（'＃calender'）。fullCalendar（{
contentHeight：400，
defaultDate：new Date（），
timeFormat：'h（：mm）a'，
header：{
left：'prev，next today'，
center：'title'，
right：'month，basicWeek，basicDay，agenda'
}，
eventLimit：true，
eventColor：'＃378006'，
events：events，
eventClick：function（calEvent，jsEvent，view）{
selectedEvent = calEvent;
$（'＃myModal #eventTitle'）。text（calEvent.title）;
var $ description = $（'< div />'）;
$ description.append（ $（'< p />'）。html（'< b>开始：< / b>'+ calEvent.start.format（DD-MM如果（calEvent.end！= null）{
$ description.append（$（'< p />'）。html（'）'））;
if < b> End：< / b>'+ calEvent.end.format（DD-MMM-YYYY HH：mm a）））; （'< p>'说明：< / b>'+ calEvent.description））;
$ description.append（$（'< p /
$（'＃myModal #pDetails'）。empty（）。html（$ description）;
$（'＃myModal'）。modal（）;
}，
selectable：true，
select：function（start，end）{
selectedEvent = {
eventID：0，
title：'' ，
description：''，
start：start，
end：end，
allDay：false，
color：''
};
openAddEditForm（）;
$（'＃calendar'）。fullCalendar（'unselect'）;
}，
editable：true，
eventDrop：function（event）{
var data = {
EventID：event.eventID，
Subject：event .title，
Start：event.start.format（'DD / MM / YYYY HH：mm A'），
End：event.end！= null？ event.end.format（'DD / MM / YYYY HH：mm A'）：null，
描述：event.description，
ThemeColor：event.color，
IsFullDay：event.allDay
};
SaveEvent（data）;
$（'＃btnEdit'）。click（function（）{
//打开编辑事件的模态对话框
openAddEditForm（）;
}）
$（'＃btnDelete'）。click（function（）{
if（selectedEvent！= null&& confirm（'Are '））{
$ .ajax（{
type：POST，
url：'/ home / DeleteEvent'，
data：{'eventID'： （data.status）{
//刷新日历
FetchEventAndRenderCalendar（）;
$（（））
'#myModal'）。modal（'hide'）;
}
}，
错误：function（）{
alert（'Failed'）; （
））
}
}）
$（'＃dtp1，＃dtp2'）。datetimepicker（{
format： 'DD / MM / YYYY HH：mm A'
}）; （$（this）.is（'：checked'））{
$（'＃
$ b $（'＃chkIsFullDay'）。隐藏（）;
}
else {
$（'＃divEndDate'）。show（）;
}
}）;
函数openAddEditForm（）{
if（selectedEvent！= null）{
$（'＃hdEventID'）。val（selectedEvent.eventID）;
$（'＃txtSubject'）。val（selectedEvent.title）;
$（'＃txtStart'）。val（selectedEvent.start.format（'DD / MM / YYYY HH：mm A'））;
$（'＃chkIsFullDay'）。prop（checked，selectedEvent.allDay || false）;
$（'＃chkIsFullDay'）。change（）;
$（'＃txtEnd'）.val（selectedEvent.end！= null？selectedEvent.end.format（'DD / MM / YYYY HH：mm A'）：''）;
$（'＃txtDescription'）。val（selectedEvent.description）;
$（'＃ddThemeColor'）。val（selectedEvent.color）;
}
$（'＃myModal'）。modal（'hide'）;
$（'＃myModalSave'）。modal（）; $（$＃
$（'＃btnSave'）。click（function（）{
// Validation /
if（$（'＃txtSubject'）.val （）。$（$'$ t $'$）$（$'$ t $'$）$（$'$ t $'$） （）。$ {
alert（'Start date required'）;
return;
}
if（$（'＃chkIsFullDay'）。 （'：checked'）== false&& $（'＃txtEnd'）。val（）。trim（）==）{
alert（'End date required'）;
return;
}
else {
var startDate = moment（$（'＃txtStart'）。val（），DD / MM / YYYY HH：mm A）toDate （）;
var endDate = moment（$（'＃txtEnd'）。val（），DD / MM / YYYY HH：mm A）toDate（）;
if（startDate> endDa te）{
alert（'结束日期无效'）;
return;
var data = {
EventID：$（'＃hdEventID'）。val（），
主题：$（' txtSubject'）.val（）。trim（），
Start：$（'＃txtStart'）.val（）。trim（），
结束：$（'＃chkIsFullDay'）。is '：checked'）？ null：$（'＃txtEnd'）。val（）。trim（），
描述：$（'＃txtDescription'）。val（），
ThemeColor：$（'＃ddThemeColor'）。 （）：
IsFullDay：$（'＃chkIsFullDay'）。
//调用将数据提交给服务器的函数
}）
函数SaveEvent（data）{
$ .ajax（{
type： POST，
url：'/ home / SaveEvent'，
data：data，
success：function（data）{
if（data.status）{
//刷新日历
FetchEventAndRenderCalendar（）;
$（'＃myModalSave'）。modal（'hide'）;
}
}，
error：function （）{
alert（'Failed'）;
}
}）
}
}）
< / script>
$ / code> 这里是我的控制器：
using System;
使用System.Collections.Generic;
使用System.Linq;
使用System.Web;
使用System.Web.Mvc;
命名空间FamilyCalendar2.Controllers
{
public class HomeController：Controller
{
// GET：Home
public ActionResult Index（）
{
return View（）;
$ b $ public public JsonResult GetEvents（）
{
using（Entities1 dc = new Entities1（））
{
var events = dc .Event.ToList（）;
返回新的JsonResult {Data = events，JsonRequestBehavior = JsonRequestBehavior.AllowGet};
$ b $ [HttpPost]
public JsonResult SaveEvent（Event e）
{
var status = false;
using（Entities1 dc = new Entities1（））
{
if（e.EventID> 0）
{
//更新事件
var v = dc.Event.Where（a => a.EventID == e.EventID）.FirstOrDefault（）;
if（v！= null）
{
v.Subject = e.Subject;
v.Start = e.Start;
v.End = e.End;
v.Description = e.Description;
v.IsFullDay = e.IsFullDay;
v.ThemeColor = e.ThemeColor;
}
}
else
{
dc.Event.Add（e）;
}
dc.SaveChanges（）;
status = true;
}
返回新的JsonResult {Data = new {status = status}};
}
[HttpPost]
public JsonResult DeleteEvent（int eventID）
{
var status = false;
using（Entities1 dc = new Entities1（））
{
var v = dc.Event.Where（a => a.EventID == eventID）.FirstOrDefault（）;
if（v！= null）
{
dc.Event.Remove（v）;
dc.SaveChanges（）;
status = true;
}
}
返回新的JsonResult {Data = new {status = status}};
code
$ b 这是事件类看起来像：
namespace FamilyCalendar2
{
using System;
使用System.Collections.Generic;
public partial class Event
{
public int EventID {get;组; }
public string Subject {get;组; }
public string描述{get;组; }
public System.DateTime开始{get;组; }
public Nullable< System.DateTime>结束{get;组; }
public string ThemeColor {get;组; }
public Nullable< bool> IsFullDay {get;组; }
public string User {get;组; }
}
}
解决方案
'DD / MM / YYYY HH：mm A'
更改为
'DD / MM / YYYY HH：mm：ss'
I am following this tutorial on making a calendar scheduler in asp.net MVC5:
http://www.dotnetawesome.com/2017/07/curd-operation-on-fullcalendar-in-aspnet-mvc.html
I am having trouble understanding how the datetime is passed and why it is showing the min value in the database (as if the value were null because left empty): specifically it is set to 1/1/0001 12:00:00 AM in the database.
I have looked into various answers on Stack Overflow but do not know how or what I need to change to make the datetime be set to a non null value.
Any help greatly appreciated.
Here is the javascript in my index view
<script>
$(document).ready(function () {
var events = [];
var selectedEvent = null;
FetchEventAndRenderCalendar();
function FetchEventAndRenderCalendar() {
events = [];
$.ajax({
type: "GET",
url: "/home/GetEvents",
success: function (data) {
$.each(data, function (i, v) {
events.push({
eventID: v.EventID,
title: v.Subject,
description: v.Description,
start: moment(v.Start),
end: v.End != null ? moment(v.End) : null,
color: v.ThemeColor,
allDay: v.IsFullDay
});
})
GenerateCalender(events);
},
error: function (error) {
alert('failed');
}
})
}
function GenerateCalender(events) {
$('#calender').fullCalendar('destroy');
$('#calender').fullCalendar({
contentHeight: 400,
defaultDate: new Date(),
timeFormat: 'h(:mm)a',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay,agenda'
},
eventLimit: true,
eventColor: '#378006',
events: events,
eventClick: function (calEvent, jsEvent, view) {
selectedEvent = calEvent;
$('#myModal #eventTitle').text(calEvent.title);
var $description = $('<div/>');
$description.append($('<p/>').html('<b>Start:</b>' + calEvent.start.format("DD-MMM-YYYY HH:mm a")));
if (calEvent.end != null) {
$description.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
}
$description.append($('<p/>').html('<b>Description:</b>' + calEvent.description));
$('#myModal #pDetails').empty().html($description);
$('#myModal').modal();
},
selectable: true,
select: function (start, end) {
selectedEvent = {
eventID: 0,
title: '',
description: '',
start: start,
end: end,
allDay: false,
color: ''
};
openAddEditForm();
$('#calendar').fullCalendar('unselect');
},
editable: true,
eventDrop: function (event) {
var data = {
EventID: event.eventID,
Subject: event.title,
Start: event.start.format('DD/MM/YYYY HH:mm A'),
End: event.end != null ? event.end.format('DD/MM/YYYY HH:mm A') : null,
Description: event.description,
ThemeColor: event.color,
IsFullDay: event.allDay
};
SaveEvent(data);
}
})
}
$('#btnEdit').click(function () {
//Open modal dialog for edit event
openAddEditForm();
})
$('#btnDelete').click(function () {
if (selectedEvent != null && confirm('Are you sure?')) {
$.ajax({
type: "POST",
url: '/home/DeleteEvent',
data: {'eventID': selectedEvent.eventID},
success: function (data) {
if (data.status) {
//Refresh the calender
FetchEventAndRenderCalendar();
$('#myModal').modal('hide');
}
},
error: function () {
alert('Failed');
}
})
}
})
$('#dtp1,#dtp2').datetimepicker({
format: 'DD/MM/YYYY HH:mm A'
});
$('#chkIsFullDay').change(function () {
if ($(this).is(':checked')) {
$('#divEndDate').hide();
}
else {
$('#divEndDate').show();
}
});
function openAddEditForm() {
if (selectedEvent != null) {
$('#hdEventID').val(selectedEvent.eventID);
$('#txtSubject').val(selectedEvent.title);
$('#txtStart').val(selectedEvent.start.format('DD/MM/YYYY HH:mm A'));
$('#chkIsFullDay').prop("checked", selectedEvent.allDay || false);
$('#chkIsFullDay').change();
$('#txtEnd').val(selectedEvent.end != null ? selectedEvent.end.format('DD/MM/YYYY HH:mm A') : '');
$('#txtDescription').val(selectedEvent.description);
$('#ddThemeColor').val(selectedEvent.color);
}
$('#myModal').modal('hide');
$('#myModalSave').modal();
}
$('#btnSave').click(function () {
//Validation/
if ($('#txtSubject').val().trim() == "") {
alert('Subject required');
return;
}
if ($('#txtStart').val().trim() == "") {
alert('Start date required');
return;
}
if ($('#chkIsFullDay').is(':checked') == false && $('#txtEnd').val().trim() == "") {
alert('End date required');
return;
}
else {
var startDate = moment($('#txtStart').val(), "DD/MM/YYYY HH:mm A").toDate();
var endDate = moment($('#txtEnd').val(), "DD/MM/YYYY HH:mm A").toDate();
if (startDate > endDate) {
alert('Invalid end date');
return;
}
}
var data = {
EventID: $('#hdEventID').val(),
Subject: $('#txtSubject').val().trim(),
Start: $('#txtStart').val().trim(),
End: $('#chkIsFullDay').is(':checked') ? null : $('#txtEnd').val().trim(),
Description: $('#txtDescription').val(),
ThemeColor: $('#ddThemeColor').val(),
IsFullDay: $('#chkIsFullDay').is(':checked')
}
SaveEvent(data);
// call function for submit data to the server
})
function SaveEvent(data) {
$.ajax({
type: "POST",
url: '/home/SaveEvent',
data: data,
success: function (data) {
if (data.status) {
//Refresh the calender
FetchEventAndRenderCalendar();
$('#myModalSave').modal('hide');
}
},
error: function () {
alert('Failed');
}
})
}
})
</script>
}
And here is my Controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace FamilyCalendar2.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public JsonResult GetEvents()
{
using (Entities1 dc = new Entities1())
{
var events = dc.Event.ToList();
return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
}
[HttpPost]
public JsonResult SaveEvent(Event e)
{
var status = false;
using (Entities1 dc = new Entities1())
{
if (e.EventID > 0)
{
//Update the event
var v = dc.Event.Where(a => a.EventID == e.EventID).FirstOrDefault();
if (v != null)
{
v.Subject = e.Subject;
v.Start = e.Start;
v.End = e.End;
v.Description = e.Description;
v.IsFullDay = e.IsFullDay;
v.ThemeColor = e.ThemeColor;
}
}
else
{
dc.Event.Add(e);
}
dc.SaveChanges();
status = true;
}
return new JsonResult { Data = new { status = status } };
}
[HttpPost]
public JsonResult DeleteEvent(int eventID)
{
var status = false;
using (Entities1 dc = new Entities1())
{
var v = dc.Event.Where(a => a.EventID == eventID).FirstOrDefault();
if (v != null)
{
dc.Event.Remove(v);
dc.SaveChanges();
status = true;
}
}
return new JsonResult { Data = new { status = status } };
}
}
}
This is what the event class looks like:
namespace FamilyCalendar2
{
using System;
using System.Collections.Generic;
public partial class Event
{
public int EventID { get; set; }
public string Subject { get; set; }
public string Description { get; set; }
public System.DateTime Start { get; set; }
public Nullable<System.DateTime> End { get; set; }
public string ThemeColor { get; set; }
public Nullable<bool> IsFullDay { get; set; }
public string User { get; set; }
}
}
解决方案 Format of the date is not a valid one for c# automated binding.
'DD/MM/YYYY HH:mm A'
Change it to
'DD/MM/YYYY HH:mm:ss'
这篇关于javascript fullcalendar datetime被搞砸了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
