Question

我正在加载一个弹出窗体，通过单击每个日期单元格中的+图标在日历界面中添加约会。我使用下面给出的方法将+图标添加到日期单元格，当用户点击它时，将出现模态框。

viewDisplay:function (view) {
            if(i==0){
                $(".fc-day-number").before("<button class=\"remove-b\" style=\"border:none; background:none\" data-toggle=\"modal\" data-target=\"#myModal\"><i class=\"icon-plus add_appt\"></i></button>");
                i++;
            }        
},

当用户点击+图标保存到数据库中时，我希望将所选日期加载到表单中的字段中。

任何人都可以帮助我知道有什么方法可以做到这一点吗？

Answer 1

这就是我能够解决类似问题的方法。仅供参考，我使用的是fullCalendar 1.6.4版。

        $(document).ready(function () {


            /* Add mouseover for the day cells so we can keep track of the day the mouse is over.
            * This is so we know which day a mouse click occured on when clicking an icon or div
            * in the day cell.
            */
            $('td.fc-day').mouseover(function () {

                // Get the date.
                var mouseoverDate = $(this).data('date');

                // Add to hidden input field.
                $('#hiddenMouseOverDate').val(mouseoverDate);

                /* Since the mouseover is not fully reliable we will
                * select and highlight the cell for visual representation
                * to the user so they know what date the event will actually 
                * be added to.
                */
                $('#calendar').fullCalendar('unselect');
                $('.fc-cell-overlay').removeClass('fc-cell-overlay');
                $('#calendar').fullCalendar('select', strDate, strDate, true);
                $(this).addClass('fc-cell-overlay');

            });

            /* We do the same thing for fc-day-number. */
            $('td.fc-day-number').mouseover(function () {

                // Get the date.
                var mouseoverDate = $(this).data('date');

                // Add to hidden input field.
                $('#hiddenMouseOverDate').val(mouseoverDate);

                // Select and highlight the cell.
                $('#calendar').fullCalendar('unselect');
                $('.fc-cell-overlay').removeClass('fc-cell-overlay');
                $('#calendar').fullCalendar('select', strDate, strDate, true);
                $("td.fc-day").filter("[data-date='" + strDate + "']").addClass('fc-cell-overlay');
            });

            /* Then in your plus icon click event you would need to store the date you saved 
             * in the '#hiddenMouseOverDate' field and copy it to some other field you want.
             * (This is to prevent using an incorrect date due to the user moving his/her mouse
             * into another day cell after they clicked on the plus icon)
             */
            $('.icon-plus').click(function (e) {


                var useDate = $('#hiddenMouseOverDate').val();

                // Rest of you code here...
                // .....

            });

        });

我做了一些调整以适应你的问题，所以我还没有对它进行测试，但逻辑就在那里。

获取选定日期到表单JQuery完整日历

1 个答案: