全日历设置掉落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

在放置事件中使用如下所示 CopyEventObject.backgroundColor = "#666666";

Answer 3

使用全日历中

element

上的

eventRender

。

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 查询

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

Answer 5

使用 FullCalendar v6（可能适用于早期版本，但无法检查），我使用 eventReceive 为正在创建的事件添加颜色。

事件接收

当外部可拖动元素具有关联的事件数据时调用 被拖放到日历上。或者另一个日历中的事件。

eventReceive: (eventDropped) => {
    eventDropped.event.setProp('backgroundColor', 'red');
},

由于发送的信息的一部分是正在创建的事件，因此您可以在渲染该事件之前对其进行各种设置。在上面的例子中，它只是将其设置为固定颜色。

如果您想传递原始元素的颜色，您可以添加类似的属性

<div id="eventType1" data-color="red"

由于您还获得了从中拖动数据的元素，因此您可以使用此属性来设置颜色...

eventDropped.event.setProp('backgroundColor', 
             eventDropped.draggedEl.getAttribute('data-color'));