FullCalendar 更改颜色新事件答案

【问题标题】：FullCalendar change color new eventFullCalendar 更改颜色新事件
【发布时间】：2016-04-30 12:06:32
【问题描述】：

我使用全日历，现在我需要如何更改新事件的颜色，以将其与加载到数据库中的事件区分开来。提出新事件的人必须通过颜色与其他人有所不同。日历使用所有人，没有用户控制，事件存储在数据库中。

【问题讨论】：

【解决方案1】：

您的问题留下了一些问题。您是否希望稍后呈现新事件的颜色？还是颜色是完全一次性的，仅用于区分新旧事件？

鉴于问题 - 请记住，您可以通过多种不同的方式设置颜色。您可以在 ajax 调用中为从数据库加载的所有项目设置静态颜色：

        events: {
            url: 'php/get-events.php',
            error: function() {
                $('#ajax-warning').show();
            },
            color: "yellow"
        },

这将为从 JSON 加载的所有事件设置默认颜色。

在json数据本身中，可以设置backgroundColor属性来改变单个item的颜色，例如

{
  "id": "999",
  "title": "Repeating Event",
  "start": "2016-05-09T16:00:00-05:00",
  "backgroundColor": "purple"
},

您可以在表单中设置事件颜色（如果这是您允许用户创建事件的方式）

如果您有一组可以添加的静态事件，您可以循环显示颜色列表，并为列表中的每个颜色提供不同的背景。

如果这不能回答您的问题，请尝试提供更多信息，说明您目前拥有什么以及您希望完成什么。

【讨论】：

我认为amybe还有另一种方法，这是我创建事件的代码......我把它放在另一个答案中

【解决方案2】：

/* initialize the calendar
        -----------------------------------------------------------------*/
        $('#calendar').fullCalendar({
            events: JSON.parse(json_events),
            height:447,
            utc: true,
            allDaySlot:false,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'agendaWeek,agendaDay'
            },
            eventConstraint: {
                        start: moment().format('YYYY-MM-DD'),
                        end: '2100-01-01'
                    },
            firstDay: 1,
                    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                    monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miercoles',
             'Jueves', 'Viernes', 'Sábado'],
                    dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
            minTime:'09:00:00',
            maxTime:'13:30:00',
                buttonText: {
                        today: 'hoy',
                        month: 'mes',
                        week: 'semana',
                        day: 'dia'
                },
            eventStartEditable: false,
            eventTextColor: '#AE413F',
            defaultView: 'agendaWeek',
            hiddenDays: [6, 0],
            editable: true,
            droppable:true,

            eventDurationEditable:false, 
            slotDuration: '00:30:00',
            defaultEventMinutes: 30,
            defaultTimedEventDuration:'00:30:00',
            forceEventDuration:true,
            eventReceive: function(event){
                var title = prompt('Nombre y Apellidos:');
                var start = event.start.format("YYYY-MM-DD[T]HH:mm:SS");
                var end = event.end.format("YYYY-MM-DD[T]HH:mm:SS");
                var antena = 'ANTENA1';
                var ssid = 'E18D93D0-B4B2-4802-8D04-CD2154B88A18';
                if(title!=null){
                $.ajax({
                    url: 'process.php',
                    data: 'type=new&title='+title+'&start='+start+'&end='+end+'&antena='+antena+'&SSID='+ssid+'&zone='+zone,
                    type: 'POST',
                    dataType: 'json',
                    success: function(response){
                        event.title = title;
                        $('#calendar').fullCalendar('updateEvent',event);
                        alert("Añadido: Atención NO marcar la casilla inferior si quiere guardar correctamente los datos");
                    },
                    error: function(e){
                        console.log(e.responseText);
                    if(error='true'){
                        alert('CITA YA ASIGNADA: Atención NO marcar la casilla inferior si quiere un funcionamiento correcto');
                    }//location.reload();

                    }
                });}else{
            location.reload();}
                $('#cafireflendar').fullCalendar('updateEvent',event);
                console.log(event);
                //location.reload();
            },

【讨论】：