FullCalendar изменение цвета новое событие

Я использую fullcalendar и теперь мне нужно, как изменить цвет нового события, чтобы отличить его от загруженных событий в базу данных. Человек, который ставит новое событие, должен отличаться от других по цвету.
В календаре используются все, пользовательский контроль и события не хранятся в базе данных.

2 ответа

  1. Ваш вопрос оставляет некоторые вопросы. Вы ожидаете, что цвет нового события будет отображен позже? или цвет вполне устраним и использован только для дифференцировать между новым и старым событием?

    Учитывая вопросы, хотя-помните, что вы можете установить цвет много различных способов. В вызове ajax можно задать статический цвет для всех элементов, загруженных из базы данных:

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

    Это позволит установить цвет по умолчанию для всех событий, загруженных из JSON.

    В самих данных json можно задать backgroundColorатрибут для изменения цвета отдельного элемента, например.g

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

    Можно задать цвет события в форме (если это позволяет пользователю создать событие)


    Если у вас есть набор статических событий, которые можно добавить, вы можете пройтись по списку цветов и предоставить каждому из них другой фон.

    Если это не ответ на ваш вопрос, попробуйте poviding больше информации о том, что у вас есть в настоящее время и чего вы хотели бы достичь.

  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();
                },