完整的日历显示正确的弹出窗口 [英] full calender show correct popup

问题描述

大家好，



我正在使用完整的日历。我有一个弹出窗口。



但问题是，如果点击带有事件的日期，它会显示弹出窗口。但是如果你点击没有事件的其他日期，它会获取上一个事件的数据。谢谢你



这里的功能：

< 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：< span class =code-digit> 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：< span class =code-keyword> 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）{
 
 < span class =code-keyword> var  dataRow = {
 '  ID'：EventID，
 '  NewEventStart'：EventStart，
 '  NewEventEnd'：EventEnd，
 '  eventTitle'：标题，
 '  eventDuration' ：eventDuration 
 
} 
 
 $ .ajax（{
 type：' < span class =code-string> POST'，
 url：   / Calendar / UpdateEvent，
 dataType：  json，
 contentType：  application / json，
数据： JSON  .stringify（dataRow）
}）; 
} 
 
< / script> 

解决方案

（ document ）。ready（ function （）{

var sourceFullView = {url：' / Calendar / GetDiaryEvents /'};
< span class =code-keyword> 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 you

Here 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();

这篇关于完整的日历显示正确的弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！