如何在完整日历中将特定日期设置为有效?

时间:2016-05-11 09:01:40

标签: javascript jquery twitter-bootstrap

我在我的项目中使用full calendar。它运行正常,但我想将特定日期设置为活动状态。此外,我想删除拖动选项。

如何做到这一点?



$(function () {

        /* initialize the external events
         -----------------------------------------------------------------*/
        function ini_events(ele) {
          ele.each(function () {

            // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
            // it doesn't need to have a start or end
            var eventObject = {
              title: $.trim($(this).text()) // use the element's text as the event title
            };

            // store the Event Object in the DOM element so we can get to it later
            $(this).data('eventObject', eventObject);

            /*// make the event draggable using jQuery UI
            $(this).draggable({
              zIndex: 1070,
              revert: true , // will cause the event to go back to its
              revertDuration: 0  //  original position after the drag
            });*/

          });
        }
        ini_events($('#external-events div.external-event'));

        /* initialize the calendar
         -----------------------------------------------------------------*/
        //Date for the calendar events (dummy data)
        var date = new Date();
        var d = date.getDate(),
                m = date.getMonth(),
                y = date.getFullYear();
        $('#calendar').fullCalendar({
          header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
          },
          buttonText: {
            today: 'today',
            month: 'month',
            week: 'week',
            day: 'day'
          },
         
          //Random default events
         events: [
           <?php
                $task = mysql_query("SELECT * FROM task");
                while($tsk = mysql_fetch_assoc($task)){
                 $start_date = $tsk['t_started_on'];
                 $d_t=explode(" ",$start_date);
                 $ex_d = $d_t[0];//2016-05-10
                 $date=explode("-",$ex_d);
                 $y=$date[0];
                 $mon=$date[1];
                 $d=$date[2];
                 $ex_t = $d_t[1];//2016-05-10
                 $time=explode(":",$ex_t);
                 $h = $time[0];
                 $min = $time[1];

           ?>

           {
              title: "<?php echo $tsk['t_title']?>",
              start: new Date(<?= $y ?>, <?= $mon-1 ?>, <?= $d ?>, <?= $h ?>, <?= $min ?>),
              allDay: false,
              backgroundColor: "#0073b7", //Blue
              borderColor: "#0073b7" //Blue
           },
           <?php } ?>
        ],
          editable: true,
          droppable: true, // this allows things to be dropped onto the calendar !!!
          drop: function (date, allDay) { // this function is called when something is dropped

            // retrieve the dropped element's stored Event Object
            var originalEventObject = $(this).data('eventObject');

            // we need to copy it, so that multiple events don't have a reference to the same object
            var copiedEventObject = $.extend({}, originalEventObject);

            // assign it the date that was reported
            copiedEventObject.start = date;
            copiedEventObject.allDay = allDay;
            copiedEventObject.backgroundColor = $(this).css("background-color");
            copiedEventObject.borderColor = $(this).css("border-color");

            // render the event on the calendar
            // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

            // is the "remove after drop" checkbox checked?
            if ($('#drop-remove').is(':checked')) {
              // if so, remove the element from the "Draggable Events" list
              $(this).remove();
            }

          }
        });

        /* ADDING EVENTS */
        var currColor = "#3c8dbc"; //Red by default
        //Color chooser button
        var colorChooser = $("#color-chooser-btn");
        $("#color-chooser > li > a").click(function (e) {
          e.preventDefault();
          //Save color
          currColor = $(this).css("color");
          //Add color effect to button
          $('#add-new-event').css({"background-color": currColor, "border-color": currColor});
        });
        $("#add-new-event").click(function (e) {
          e.preventDefault();
          //Get value and make sure it is not null
          var val = $("#new-event").val();
          if (val.length == 0) {
            return;
          }

          //Create events
          var event = $("<div />");
          event.css({"background-color": currColor, "border-color": currColor, "color": "#fff"}).addClass("external-event");
          event.html(val);
          $('#external-events').prepend(event);

          //Add draggable funtionality
          ini_events(event);

          //Remove event from text input
          $("#new-event").val("");
        });
      });
&#13;
                <div class="box-body table-responsive no-padding">
                  <div class="col-md-12">
                    <div class="box box-solid">
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div id="calendar"></div>                    
                    </div>
                  </div>
                </div>
              </div>
&#13;
&#13;
&#13;

0 个答案:

没有答案