Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change color of business time of Fullcalendar

I'm using fullcalendar in my website, but now i want to set the color of the business time but i don't succeed. Now the background color of my calendar is orange, and the business color is a little deeper orange. Now i want to change it into another color(for ex: red). But in fullcalendar.css i only found there is one line for background color for not-business-time: .fc-nonbusiness. How can i change it? Thank you.enter image description here

And here is my code of my calendar now:

# CSS Code

body {
    padding-top: 70px;
    /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

#calendar {
    max-width: 100%;
}

#calendar.agenda{
    background-color: #FF9900;
}

.col-centered {
    float: none;
    margin: 0 auto;
}

#calendar .fc-agendaWeek-view .fc-today, #calendar .fc-agendaDay-view .fc-today, #calendar .fc-month-view .fc-today {
    background: #C0C0C0 !important;
}

# Fullcalendar JS

$('#calendar').fullCalendar({
    locale: "es",
    header: {
        left: 'prev, next today',
        center: 'title',
        right: 'month, agendaWeek, agendaDay'
    },
    views: {
        week: {
            columnFormat:'ddd D',
        },
    },
    defaultView: 'agendaWeek',
    allDaySlot: false,
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    selectable: true,
    selectHelper: true,
    minTime: "09:30:00",
    maxTime: "20:00:00",
    slotLabelFormat: "HH:mm",
    slotDuration: "00:30:00",
    slotLabelInterval: "00:30:00",
    slotWidth: 15,
    businessHours: {
        start: '13:30',
        end:   '17:00',
        dow:  [1,2,3,4,5,6,0],
    },
    viewRender: function(view, element) {
        $("#calendar").addClass('agenda');
    }
});
like image 437
Minalinsky Avatar asked Aug 16 '17 13:08

Minalinsky


People also ask

How do I change the color on my FullCalendar?

You can change the color of all events on the calendar like so: var calendar = new Calendar(calendarEl, { events: [ // my event data ], eventColor: '#378006' }); You can use any of the CSS color formats such #f00 , #ff0000 , rgb(255,0,0) , or red .

How do I display an image in FullCalendar?

You can add any image url to your eventObject by adding the attribute "imageurl" inside of the events definition (if you just want the image, don't specify a title):

How do I start and end date in FullCalendar?

We can get start date by getView event with intervalStart. We can get end date by getView event with intervalEnd. var month = $('#calendar'). fullCalendar('getView').


1 Answers

Emm, okay i found a solution like this:

/** Updated code */

#calendar .fc-bgevent {
    background: #000000;
}

......

events: [
    {
        start: '13:30',
        end: '17:00',
        dow:[1,2,3,4,5,6,0],
        rendering: 'background'
    },
]

i deleted the business hour and reset the background color by a background event

like image 92
Minalinsky Avatar answered Sep 28 '22 21:09

Minalinsky