【问题标题】:Select entire week in fullcalendar在全日历中选择整周
【发布时间】:2013-04-07 08:17:35
【问题描述】:

我在使用 fullcalendar 插件时遇到问题,我试图通过单击在月视图中选择一整周,然后创建一个事件。换句话说,如果您单击特定周的任何一天,该周将突出显示并创建一个事件。此后此事件应输入我的数据库。

这是我目前所拥有的:

<script>
    $(document).ready(function() {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
// page is now ready, initialize the calendar...

$("#calendar").fullCalendar({
    // put your options and callbacks here
    header: {
            right: "today prev,next",
            left: "title",
        },
    height:650,
        selectable: true,
        selectHelper: true,
        select: function(start, end, allDay) {
            var title = confirm("Apply for kitchenweek?");
            if (title) {
                calendar.fullCalendar("renderEvent",
                    {
                        title: title,
                        start: start,
                        end: end,
                        allDay: allDay
                    },
                    true // make the event "stick"
                );
            }
            calendar.fullCalendar("unselect");
        },
    editable: true,
    events: "/json-events.php"
   })
  });
</script>

任何帮助将不胜感激。

【问题讨论】:

标签: jquery database select fullcalendar selectable


【解决方案1】:

一些用户没有注意到 OP 编辑​​了他们的问题以包含答案,因此为了便于访问,我将其重新发布为答案,以免人们错过它。 完全公开这不是我的代码,它是 OP 的代码,支持他的问题而不是这个答案。 这里说的是代码:

(由于不是我写的,我不能保证它可以正常工作,也不能解释)

   <script>
        $(document).ready(function() {
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
    // page is now ready, initialize the calendar...

   var calendar = $("#calendar").fullCalendar({
    // put your options and callbacks here
    header: {
            right: "today prev,next",
            left: "title"
        },
    height:650,
    events: "/json-events.php",
    //selectable: true,
        selectHelper: true,
    dayClick: function(start, allDay, jsEvent, view) {
        $(this).parent().siblings().removeClass("week-highlight");
        $(this).parent().addClass("week-highlight");
        if(start < date && start.getDate() != date.getDate())
        {
            alert("Cannot select past dates.");
            $(this).parent().removeClass("week-highlight");
            return;
        }
            var title = confirm("Apply for kitchenweek?");
             var now = date? new Date(start-1) : new Date();
             now.setHours(0,0,0,0);
             var monday = new Date(now);
             monday.setDate(monday.getDate() - monday.getDay() + 1);
             var sunday = new Date(now);
             sunday.setDate(sunday.getDate() - sunday.getDay() + 7);
            if (title) {
                calendar.fullCalendar("renderEvent",
                    {
                        title: "Kitchenweek for: '; echo $username; echo'",
                        start: monday,
                        end: sunday,
                        allDay: allDay
                    },
                    true // make the event "stick"
                );
            var mondaydate = $.fullCalendar.formatDate(monday,"yyyy-MM-dd");
            var sundaydate = $.fullCalendar.formatDate(sunday,"yyyy-MM-dd");
            var pname = "Kitchenweek for: '; echo $username; echo'";
            var username = "'; echo $username; echo'";
            $.ajax({
            type: "POST",
            url: "/new_event.php",
            data: {
            startdate: mondaydate,
            enddate: sundaydate,
            event_title: pname,
            uname: username
            }
            });
            }
            $(this).parent().removeClass("week-highlight");
        }
});
});
</script>

【讨论】:

    【解决方案2】:

    我设法在月视图中选择了整个星期,并在 fullcalendar js 中进行了一些修改。 在函数 renderDayOverlay 中的 fullcalendar js 中

    function renderDayOverlay(overlayStart, overlayEnd, refreshCoordinateGrid) {
    overlayStart.setDate(overlayStart.getDate()-overlayStart.getDay());
    overlayEnd.setDate(overlayStart.getDate() + 7);
    .
    .
    .
    .
    overlayEnd.setDate(overlayEnd.getDate() - 1); // last line of function
    

    它选择整周的事件并在该周保存该事件。 还有一个问题是他们关于连续几个月(即 4 月 28 日至 5 月 4 日)一周的 EndDate 计算。 在其他几周内它有效。

    【讨论】:

      猜你喜欢
      • 2012-04-25
      • 1970-01-01
      • 2014-11-25
      • 1970-01-01
      • 1970-01-01
      • 2023-04-06
      • 1970-01-01
      • 2015-05-04
      • 1970-01-01
      相关资源
      最近更新 更多