CODEWITHSUNDEEP
jqueryfullcalendar
Alexander Diedler
Alexander Diedler

Reputation: 1

Cusomize event view in basicview like in agendaview

I want to have the same event view in basicweek as in agendaweek. (Darker headline contains the event from and event to time) and then a light-blue contains the information. Where can I cusomize this style?

Greetings Alexander

Upvotes: 0

Views: 254

Answers (2)

Jake1164
Jake1164

Reputation: 12359

Create a style and add that new style name to the classname property in the event.

You can find more details in the "Event Colors" section of the documentation. http://arshaw.com/fullcalendar/docs/event_rendering/Colors/

EDIT

Here is some example code:

<style type="text/css">

    .holiday, 
    .fc-agend a .holiday .fc-event-time,
    .holiday a
    {
        background-color: Olive; /* background color */
        border-color: Olive;     /* border color */
        color: White;           /* text color */
    }
    .holiday div
    {
       background-color: Black;
    }
    .vacation, 
    .fc-agend a .vacation .fc-event-time,
    .vacation a
    {
        background-color: Maroon; /* background color */
        border-color: Maroon;     /* border color */
        color: White;           /* text color */
    }
    .other, 
    .fc-agend a .other .fc-event-time,
    .other a
    {
        background-color: Fuchsia; /* background color */
        border-color: Fuchsia;     /* border color */
        color: White;           /* text color */
    }

</style>


    $(document).ready(function() {
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        $('#calendar').fullCalendar({
            header: {
                left: 'prev, next today',
                center: 'title',
                right: 'month, basicWeek, basicDay'
            },
            events: [
            {
                title: 'Top Half<div>Bottom Half</div>',
                start: new Date(y, m, 1),
                description: 'long description',
                className: 'holiday',
                id: 1
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d - 5),
                end: new Date(y, m, 1),
                description: 'long description3',
                className: 'vacation',
                id: 2
            }]
        });

    });

Upvotes: 1

Jake1164
Jake1164

Reputation: 12359

To get the two level color you would need a few additional steps. You have to modify the fullcalendar.js script in one place.

The fullcalendar removes all HTML so you would have to modify line ~3900 and add the following:

    return s.replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/'/g, '&#039;')
    .replace(/"/g, '&quot;')
    .replace(/\n/g, '<br />')
    .replace(/&lt;div&gt;/g, '<div>')
    .replace(/&lt;\/div&gt;/g, '</div>');

And then the formating for the title would be:

event: 'upper half <div> lower half </div>'

and in the style add a new style for the new div

.holiday div { background-color: black; }

Upvotes: 0

Related Questions