Блог

У меня есть полный календарь, встроенный в мою веб-страницу, и в календаре будет внешнее событие для перетаскивания, но оно должно быть разрешено только в субботу текущего месяца. удаление: true включить удаление для всего календаря. Как я могу включить удаление только для субботы в текущем месяце?

** Если суббота нажата и выделена (желтым цветом), она также не может быть удалена

Css:

   .blink{
    animation: blinker 2s linear infinite;
    background-color: red !important;

}

@keyframes blinker {  


     50% { opacity: 0; }

   }


body {
    margin: 40px 10px;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;
}

#datepicker {
    max-width: 750px;
    margin: 0 auto;
}


    #wrap {
        width: 1500px;
        margin: 0 auto;
      }

      #external-events {
        float: left;
        width: 150px;
        padding: 0 10px;
        border: 1px solid #ccc;
        background: #eee;
        text-align: left;
      }

      #external-events h4 {
        font-size: 16px;
        margin-top: 0;
        padding-top: 1em;
      }

      #external-events .fc-event {
        margin: 10px 0;
        cursor: pointer;
      }

      #external-events p {
        margin: 1.5em 0;
        font-size: 11px;
        color: #666;
      }

      #external-events p input {
        margin: 0;
        vertical-align: middle;
      }
  

Javascript:

  var holidays=[];
    var saturdays=[];
    var calEventStatus = [];
    $(document).ready(function(){



        // Manage status of dragging event and calendar



            /* Required functions */

            var isEventOverDiv = function(x, y) {

                var external_events = $( '#external-events' );
                var offset = external_events.offset();
                offset.right = external_events.width()   offset.left;
                offset.bottom = external_events.height()   offset.top;

                // Compare
                if (x >= offset.left
                    amp;amp; y >= offset.top
                    amp;amp; x <= offset.right
                    amp;amp; y <= offset .bottom) { return true; }
                return false;

            }


            function makeEventsDraggable () { 

                $('.fc-draggable').each(function() {

                    // store data so the calendar knows to render an event upon drop
                    $(this).data('event', {
                        title: $.trim($(this).text()), // use the element's text as the event title
                        stick: true // maintain when user navigates (see docs on the renderEvent method)
                    });

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


                    // Dirty fix to remove highlighted blue background
                    $("td").removeClass("fc-highlight");

                });

            }

            /* initialize the external events
            -----------------------------------------------------------------*/

            $('#external-events .fc-event').each(function() {

                // store data so the calendar knows to render an event upon drop
                $(this).data('event', {
                    title: $.trim($(this).text()), // use the element's text as the event title
                    stick: true // maintain when user navigates (see docs on the renderEvent method)
                });

                // make the event draggable using jQuery UI
                $(this).draggable({
                    zIndex: 999,
                    revert: true,      // will cause the event to go back to its
                    revertDuration: 0,  //  original position after the drag
                            stop: function( event, ui ) {

                                 dragStop();

                            }
                });

            });



      $('#datepicker').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: ''
                },
                editable: true,
                droppable: true, // this allows things to be dropped onto the calendar
                dragRevertDuration: 0,
                eventLimit: true, // allow "more" link when too many events
                drop: function(date, jsEvent, ui) {
                    // is the "remove after drop" checkbox checked?
                    if ($('#drop-remove').is(':checked')) {
                        // if so, remove the element from the "Draggable Events" list
                        $(this).remove();
                    }

                    // if event dropped from another calendar, remove from that calendar
                    if (typeof calEventStatus['calendar'] != 'undefined') {
                        $(calEventStatus['calendar']).fullCalendar('removeEvents', calEventStatus['event_id']);
                        //$(calEventStatus['calendar']).fullCalendar('unselect');
                    }

                    //makeEventsDraggable();
                },
                eventReceive: function( event ) { 
                    //makeEventsDraggable();
                },
                eventDrop: function( event, delta, revertFunc, jsEvent, ui, view ) { 


                    makeEventsDraggable();
                },
                eventDragStart: function( event, jsEvent, ui, view ) {


                    // Add dragging event in global var 
                    calEventStatus['calendar'] = '#datepicker';
                    calEventStatus['event_id'] = event._id;



                            drag();

                },
                eventDragStop: function( event, jsEvent, ui, view ) { 

                    if(isEventOverDiv(jsEvent.clientX, jsEvent.clientY)) {
                        $('#datepicker').fullCalendar('removeEvents', event._id);
                        var el = $( "<div class='fc-event'>" ).appendTo( '#external-events-listing' ).text( event.title );
                        el.draggable({
                          zIndex: 999,
                          revert: true, 
                          revertDuration: 0 
                        });
                        el.data('event', { title: event.title, id :event.id, stick: true });
                    }

                            dragStop();

                    calEventStatus = []; // Empty
                    //makeEventsDraggable();
                },
                eventResize: function( event, delta, revertFunc, jsEvent, ui, view ) {
                    makeEventsDraggable();
                },

                        dayClick: function(calEvent, jsEvent, view) {

                         var date = new Date($('#datepicker').fullCalendar('getDate').format());

                         var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
                         var lastDay = new Date(date.getFullYear(),date.getMonth()  1, 0);



                         var formattedFirst= new Date(formatDate(firstDay));
                         var formattedLast= new Date(formatDate(lastDay));
                         var formattedSelect= new Date(calEvent.format());


                         if (formattedSelect>=formattedFirst amp;amp; formattedSelect<= formattedLast){
                             if($(this).css('background-color')=="rgba(0, 0, 0, 0)"){ //rgba(0, 0, 0, 0)
                                $(this).css('background-color', 'yellow');
                                holidays.push(calEvent.format());


                             }
                             else{
                                 $(this).css('background-color','rgba(0, 0, 0, 0)' );

                                  var index= holidays.indexOf(calEvent.format());
                                  if (index > -1) {
                                        holidays.splice(index, 1);
                                  }
                             }
                         }



                   },
                   viewRender: function(view, element) {
                          makeEventsDraggable();
                          holidays=[];
                          saturdays=[];

                            var d = new Date($('#datepicker').fullCalendar('getDate').format());

                            var getTot = daysInMonth(d.getMonth() 1,d.getFullYear()); //Get total days in a month


                            for(var i=1;i<=getTot;i  ){    //looping through days in month
                                var newDate = new Date(d.getFullYear(),d.getMonth(),i)

                                if(newDate.getDay()==6){   //if Saturday
                                    saturdays.push(formatDate(newDate));
                                }

                            }

                            function daysInMonth(month,year) {
                                return new Date(year, month, 0).getDate();
                            }

                   }



            });



    });

   function formatDate(date) {
        var d = new Date(date),
            month = ''   (d.getMonth()   1),
            day = ''   d.getDate(),
            year = d.getFullYear();

        if (month.length < 2) month = '0'   month;
        if (day.length < 2) day = '0'   day;

        return [year, month, day].join('-');
   }

   $("#nextBtn").on('click',function(){
        var holidayStr= holidays.join();



       var date = $("#datepicker").fullCalendar('getDate');


       console.log(date.year());


        $("#addedHoliday").val(holidayStr);
         $("#scheduleMonth").val("" (date.month() 1));
          $("#scheduleYear").val("" date.year());

   });



function drag() {



if(saturdays){
    for(var i=0;i<saturdays.length;i  ){    //looping through days in month
        if(holidays.indexOf(saturdays[i])<0)
          $('.fc-day[data-date="' saturdays[i] '"]').addClass('blink');



      }


    }
   }
function dragStop(ev){

    if(saturdays){
        for(var i=0;i<saturdays.length;i  ){    //looping through days in month
            if(holidays.indexOf(saturdays[i])<0)
              $('.fc-day[data-date="' saturdays[i] '"]').removeClass('blink');

        }
    }
}
  

HTML:

 <div id="datepicker"></div>
<div id='wrap' class="form-group">

                <div id='external-events'>
                  <div id='external-events-listing'>
                    <h4>Draggable Events (Saturday)</h4>
                            <div class='fc-event' ondrag="drag()" ondragend="dragStop(event)" >My Event 1</div>

                  </div>

     </div>
 </div>