完整日历设置掉落 div 的颜色

Question

这是我的完整日历实现：

$(renderTo).fullCalendar({
        timeFormat: 'HH:mm',
        axisFormat: 'HH:mm',
        defaultView:view,
        firstHour:  7,
        firstDay:   1,
        titleFormat: {
            month: 'MMMM yyyy',
            week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}",
            day: 'dddd, d MMM yyyy',
        },
        columnFormat: {
            month: 'ddd',
            week: 'ddd, dd.MM',
            day: 'dddd, dd.MM'
        },
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        buttonText: {
            prev: '<',
            next: '>',
            prevYear: '«',
            nextYear: '»',
            today:    'dziś',
            month:    'miesiąc',
            week:     'tydzień',
            day:      'dzień'
        },
        monthNames: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'],
        monthNamesShort: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru'],
        dayNames: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'],
        dayNamesShort: ['Nie', 'Pon', 'Wto', 'Śro', 'Czw', 'Pią', 'Sob'],
        editable: true,
        eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
            result = updateEvent(event.id,dayDelta,minuteDelta,allDay,'false');
            if (result == true) {
            } else {
                revertFunc();
                alert(result);
            }
        },
                eventMouseover: function( event, jsEvent, view ) { 
                    var details = getDetails(event.id, $(this));
                                    },
        eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
            result = updateEvent(event.id,dayDelta,minuteDelta,'false','true');
            if (result == true) {
                //alert('Zmiana została zapisana');
            } else {
                revertFunc();
                alert(result);
            }
        },
        droppable: true, // this allows things to be dropped onto the calendar !!!
        drop: function(date, allDay) {
            var originalEventObject = $(this).data('eventObject');
            var copiedEventObject = $.extend({}, originalEventObject);
            copiedEventObject.start     = date;
            copiedEventObject.allDay    = allDay;
            //$time
            result  = addNewEvent(copiedEventObject.start.toISOString(),originalEventObject.title,originalEventObject.allDay);
            if (result == true) {
                var currentView = $(renderTo).fullCalendar('getView');
                renderCalendar(renderTo,currentView.name);
            } else {
                alert(result);
            }
        },
        events: {
            url:    '/schedule/getCalendarEvents',
            data: {
                agent_id: <?php echo $this->user_info->id; ?>,
            },
            error: function() {
                alert('Wystąpił problem w czasie pobierania danych!');
            },
            //color: 'yellow',   // a non-ajax option
            textColor: 'black' // a non-ajax option
        },
        loading: function(bool) {
            if (bool) $('#loading').show();
            else $('#loading').hide();
        }
    });

我想放弃这个div：

<div class="external-event ui-draggable" style="position: relative;background-color:red">sdf</div>

如何在丢弃带有丢弃div 的事件时动态更改背景颜色

所以在这个例子中，我想要一个新的事件 bg-color：red

Answer 1

我遇到了同样的问题，我解决了它。事件的 HTML 文件：

<div id='external-events'>
    <h4>Events</h4>
    <div class='fc-event' style="background-color: red;" data-color='red'>Event 1</div>
    <div class='fc-event' style="background-color: blue;" data-color='blue'>Event 2</div>
    <div class='fc-event' style="background-color: green;" data-color='green'>Event 3</div>
    <div class='fc-event' style="background-color: yellow;" data-color='yellow'>Event 4</div>
  </div>
</div>

和JavaScript代码：

/* 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)
  color: $(this).data('color')
});
// 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
});
});

你可以在这里测试。

Answer 2

在 drop 事件中使用如下copiedEventObject.backgroundColor = "#666666";

Answer 3

使用全日历中eventRender上的element。

http://fullcalendar.io/docs/event_rendering/eventRender/

Answer 4

HTML 查询

 <div id="mydrag">
                    <div class='fc-event'>My Event 1</div>
                    <div class='fc-event'>My Event 2</div>
                    <div class='fc-event'>My Event 3</div>
                    <div class='fc-event'>My Event 4</div>
                    <div class='fc-event'>My Event 5</div>
 </div>

Javascript Query

<style>
 #mydrag>.fc-event{
                background-color: red;
                color: white;
 }
 </style>