完整的日历显示正确的弹出窗口

本文介绍了完整的日历显示正确的弹出窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 大家好， 我正在使用完整的日历。我有一个弹出窗口。 但问题是，如果点击带有事件的日期，它会显示弹出窗口。但是如果你点击没有事件的其他日期，它会获取上一个事件的数据。谢谢你 这里的功能： < script> $（ document ）。ready（ function （）{ var sourceFullView = {url：' / Calendar / GetDiaryEvents /'}; var sourceSummaryView = {url：' / Calendar / GetDiarySummary /'}; var CalLoading = true ; $（' ＃calendar'）。 fullCalendar（{ header：{ left：' prev，next today' ， center：' title'， right：' month，agendaWeek，agendaDay' }， defaultView：' month'，可编辑： true ， allDaySlot： false ，可选： true ， slotMinutes： 15 ， eventClick： function （calEvent，jsEvent，view）{ var durationEvent = calEvent.end - calEvent.start; var title = $（' ＃eventTitle ）VAL（）; $（ ＃popupEventForm）。find（ form）。find（ #eventTitle）。attr（' 占位符'，calEvent.title）; $（ ＃eventDate）。html（moment（calEvent.EventStart）.format （' MMM Do h：mm A'））; // $（＃popupEventForm）。find（form）。find（＃eventDate ）。attr（calEvent.EventStart）; $（ ＃popupEventForm）。find（calEvent.start）.html（moment（ ＃eventDate ）。format（（' MMM Do h：mm A'）））; $（' ＃popupEventForm'）。show（）; // alert（$（＃eventDate）。html（moment（calEvent。开始）.format（'MMM Do h：mm A'）））; // $（。modal-header）。html（id ='＃eventTitle'> Moo gin< / div>） ; }， eventDrop： function （event，dayDelta，minuteDelta，allDay，revertFunc）{ if （confirm（ 确认移动？））{ UpdateEvent（event.id，event.start）; } else { revertFunc（）; } }， eventResize： function （event，dayDelta，minuteDelta，revertFunc）{ if （确认（ 确认更改预约长度？））{ UpdateEvent（event.id，event.start，event.end）; } else { revertFunc（）; } }， dayClick： function （date，allDay，jsEvent ，查看）{ $（' ＃eventTitle' ）.val（ ）; $（' ＃eventDate'）。val（$。fullCalendar.formatDate（date， ' dd / MM / yyyy'））; $（' ＃eventTime'）。val（$。fullCalendar.formatDate（date， ' HH：mm'））; ShowEventPopup（date）; }， viewRender： function （view，element）{ if （！CalLoading）{ if （view.name == ' month'）{ $（' ＃calendar'）。fullCalendar（' removeEventSource' ，sourceFullView）; $（' ＃calendar'）。fullCalendar（' removeEvents'）; $（' ＃calendar'）。fullCalendar（' addEventSource'，sourceFullView）; } 其他 { $（' ＃calendar'）。fullCalendar（' removeEventSource'，sourceSummaryView ）; $（' ＃calendar'）。fullCalendar（' removeEvents'）; $（' ＃calendar'）。fullCalendar（' addEventSource'，sourceFullView）; } } } }）; CalLoading = false ; }）; $（' ＃btnInit'）。click（ function （）{ $ .ajax（{ type：' POST'， url： / Calendar / Init，成功： function （响应）{ if （response == ' True'）{ $（' ＃calendar'）。fullCalendar（' refetchEvents'）; alert（' 填充数据库！'）; } else { alert（' 错误，可以不填充数据库！'）; } } }）; }）; $（' ＃btnPopupCancel'）。click（ function （）{ ClearPopupFormValues（）; $（' ＃popupEventForm'）。hide（）; }）; $（' ＃btnPopupSave'）。click（ function （）{ $（' ＃ popupEventForm'）。hide（）; var dataRow = { ' 标题'：$（' #eventTitle'）。val（）， ' NewEventDate'： $（' ＃eventDate'）。val（）， ' NewEventTime'：$（' ＃eventTime'）。val（）， ' NewEventDuration'：$（' ＃eventDuration'）。val（） } ClearPopupFormValues（）; $ .ajax（{ type：' POST' ， url： / Calendar / SaveEvent， data：dataRow， 成功：功能（响应）{ if （response == ' True'）{ $（'' ＃calendar'）。fullCalendar（' refetchEvents' ）; alert（' 保存新事件！'）; } else { alert（' 错误，无法保存事件！'）; } } }）; }）; function ShowEventPopup（date）{ var options = { backdrop： static } ClearPopupFormValues（）; $（' ＃popupEventForm'）。modal（options）; // console.log（hallo）; $（' ＃eventTitle'）。focus（）; } function ClearPopupFormValues（ ）{ $（' ＃eventID'）。val（ ）; $（' ＃eventTitle'）。val（ ）; $（' ＃eventDateTime'）。val（ ）; $（' ＃eventDuration'）。val（ ）; } function UpdateEvent（EventID，EventStart，EventEnd，Title，eventDuration）{ var dataRow = { ' ID'：EventID， ' NewEventStart'：EventStart， ' NewEventEnd'：EventEnd， ' eventTitle'：标题， ' eventDuration' ：eventDuration } $ .ajax（{ type：' POST'， url： / Calendar / UpdateEvent， dataType： json， contentType： application / json，数据： JSON .stringify（dataRow）}）; } < / script> 解决方案 （ document ）。ready（ function （）{ var sourceFullView = {url：' / Calendar / GetDiaryEvents /'}; var sourceSummaryView = {url：' / Calendar / GetDiarySummary /' }; var CalLoading = true ; （' ＃calendar'）。fullCalendar（{ header：{左：' prev，next today'， center：' title'， right：' month，agendaWeek，agendaDay' }， defaultView：' 月，可编辑： true ， allDaySlot： false ，可选： true ， slotMinutes： 15 ， eventClick： function （calEvent，jsEvent，view）{ var durationEvent = calEvent.end - calEvent.start; var title = （' ＃EVENTTITLE'）VAL（）; HI everybody,I am using the full calender. And I have a popup.But the problem is that if you click on a date with event it shows the popup. but then if you click on an other date without event it takes the data of the previous event.Thank youHere the functions: <script> $(document).ready(function () { var sourceFullView = { url: '/Calendar/GetDiaryEvents/' }; var sourceSummaryView = { url: '/Calendar/GetDiarySummary/' }; var CalLoading = true; $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultView: 'month', editable: true, allDaySlot: false, selectable: true, slotMinutes: 15, eventClick: function (calEvent, jsEvent, view) { var durationEvent = calEvent.end - calEvent.start; var title = $('#eventTitle').val(); $("#popupEventForm").find("form").find("#eventTitle").attr('placeholder', calEvent.title); $("#eventDate").html(moment(calEvent.EventStart).format('MMM Do h:mm A')); //$("#popupEventForm").find("form").find("#eventDate").attr(calEvent.EventStart); $("#popupEventForm").find(calEvent.start).html(moment("#eventDate").format(('MMM Do h:mm A'))); $('#popupEventForm').show(); //alert($("#eventDate").html(moment(calEvent.start).format('MMM Do h:mm A'))); //$(".modal-header").html("id='#eventTitle'>Moo gin</div>"); }, eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) { if (confirm("Confirm move?")) { UpdateEvent(event.id, event.start); } else { revertFunc(); } }, eventResize: function (event, dayDelta, minuteDelta, revertFunc) { if (confirm("Confirm change appointment length?")) { UpdateEvent(event.id, event.start, event.end); } else { revertFunc(); } }, dayClick: function (date, allDay, jsEvent, view) { $('#eventTitle').val(""); $('#eventDate').val($.fullCalendar.formatDate(date, 'dd/MM/yyyy')); $('#eventTime').val($.fullCalendar.formatDate(date, 'HH:mm')); ShowEventPopup(date); }, viewRender: function (view, element) { if (!CalLoading) { if (view.name == 'month') { $('#calendar').fullCalendar('removeEventSource', sourceFullView); $('#calendar').fullCalendar('removeEvents'); $('#calendar').fullCalendar('addEventSource', sourceFullView); } else { $('#calendar').fullCalendar('removeEventSource', sourceSummaryView); $('#calendar').fullCalendar('removeEvents'); $('#calendar').fullCalendar('addEventSource', sourceFullView); } } } }); CalLoading = false; }); $('#btnInit').click(function () { $.ajax({ type: 'POST', url: "/Calendar/Init", success: function (response) { if (response == 'True') { $('#calendar').fullCalendar('refetchEvents'); alert('Database populated! '); } else { alert('Error, could not populate database!'); } } }); }); $('#btnPopupCancel').click(function () { ClearPopupFormValues(); $('#popupEventForm').hide(); }); $('#btnPopupSave').click(function () { $('#popupEventForm').hide(); var dataRow = { 'Title': $('#eventTitle').val(), 'NewEventDate': $('#eventDate').val(), 'NewEventTime': $('#eventTime').val(), 'NewEventDuration': $('#eventDuration').val() } ClearPopupFormValues(); $.ajax({ type: 'POST', url: "/Calendar/SaveEvent", data: dataRow, success: function (response) { if (response == 'True') { $('#calendar').fullCalendar('refetchEvents'); alert('New event saved!'); } else { alert('Error, could not save event!'); } } }); }); function ShowEventPopup(date) { var options = { "backdrop": "static" } ClearPopupFormValues(); $('#popupEventForm').modal(options); //console.log("hallo"); $('#eventTitle').focus(); } function ClearPopupFormValues() { $('#eventID').val(""); $('#eventTitle').val(""); $('#eventDateTime').val(""); $('#eventDuration').val(""); } function UpdateEvent(EventID, EventStart, EventEnd, Title, eventDuration) { var dataRow = { 'ID': EventID, 'NewEventStart': EventStart, 'NewEventEnd': EventEnd, 'eventTitle': Title, 'eventDuration': eventDuration } $.ajax({ type: 'POST', url: "/Calendar/UpdateEvent", dataType: "json", contentType: "application/json", data: JSON.stringify(dataRow) }); } </script> 解决方案 (document).ready(function () { var sourceFullView = { url: '/Calendar/GetDiaryEvents/' }; var sourceSummaryView = { url: '/Calendar/GetDiarySummary/' }; var CalLoading = true;('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultView: 'month', editable: true, allDaySlot: false, selectable: true, slotMinutes: 15, eventClick: function (calEvent, jsEvent, view) { var durationEvent = calEvent.end - calEvent.start; var title =('#eventTitle').val(); 这篇关于完整的日历显示正确的弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！