FullCalendar change color new event

Question

I use fullcalendar and I need to now how to change the color of the new event, to differentiate it from the loaded events into the database. The person who puts the new event, has to difference from others by color. The calendar uses everyone, no user control and events are stored in a database.

Answer 1

Your question leaves some questions of its own. Do you expect for the color of the new event to be rendered later? or is the color completely disposable and used only for differentiating between a new and old event?

Given the questions though - remember that you can set color is MANY different ways. You can set a static color for all items loaded from the database in your ajax call:

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

That will set the default color for all the events loaded from JSON.

In the json data itself, you can set the backgroundColor attribute to change the color of an individual item, e.g

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

You can set the event color in a form (if that is how you allow a user to create an event)

---

If you have a set of static events that can be added you can cycle through a list of colors and provide each one in the list with a different background.

--

If this doesn't answer your question, try poviding more information on what you have currently and what you'd like to accomplish.

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