CODEWITHSUNDEEP
angularjsfullcalendar
mahmoud hussein
mahmoud hussein

Reputation: 23

fullcalendar change the date cell background color, not only events background color

How can I change the date cell background colour, not only events background colour?

fullcalendar only has have background colour for events in the documents.

Upvotes: 1

Views: 4151

Answers (2)

VisualBean
VisualBean

Reputation: 5008

You need to set the color on the Event Source Object

Like the following

eventSources: [
            {
                url: 'api/holidays',
                color: 'yellow' // This is where you set the cell color
            },

This makes all my holidays yellow..

UPDATE:

I've set

  • allDay = true
  • Rendering = Background

on all eventObjects coming from that source.

enter image description here

Upvotes: 1

Luis Masuelli
Luis Masuelli

Reputation: 12343

Although I don't know the fullcalendar components in detail, try the following:

  1. Check whether there's a property to set the color. If you find one, use it and stop here. You're done.
  2. Generate a fullcalendar object (via appropriate angularjs directives, I guess) and inspect the generated DOM in the directive template file/string or with your browser (test it with many browsers if you don't feel sure when inspecting such structure; I always would prefer inspecting the templates but there are times when that becomes quite hard).
  3. Find the cells you want to customize and infer the appropriate CSS selector (If you don't know how to define an appropriate selector for what you find, this is not the place to go zero-to-selectors so I hope you know about CSS3 enough).
  4. Define the new background-color (and perhaps border-color) for such selectors.

You are done but perhaps you want more customization (e.g. have a fixed numbers of colors you'd use, as Ionic or Twitter Bootstrap), you could start the same selector several times adding additional classes for the colors.

Assume your calendar has a structure like this:

<div class="full-calendar">
    ...
    <div class="column" ng-repeat="day in daysOfMonth">
        ...
        <div class="cell" ng-repeat="half_hour in halfHoursOfDay">
            ...
        </div>
    </div>
</div>

Your selector would be something like this:

div.full-calendar > div.column > div.cell

And you'd use like this:

div.full-calendar > div.column > div.cell {
    background-color: #ff7733;
}

And if perhaps you'd like to use several different colors, you could define several discriminator classes in two different ways:

  1. Providing the full-calendar directive lets you add custom classes, you add your-custom-class to the directive, and define it like this in your selector:

    div.full-calendar.your-custom-class > div.column > div.cell {
    background-color: #ff8877;
}
/* you should study the generated structure to check whether your custom class is added exactly there, or where, and customize the selector you want */

  2. If you can't directly add custom classes by a mean provided by the directive, you always can wrap the element and customize it:

    <!-- html -->

<div style="display: inline-block" class="your-custom-class">
    <your-full-calendar-directive-here />
</div>

/* css */

.your-custom-class div.full-calendar > div.column > div.cell {
    background-color: #ff8877;
}

Summary: No. I don't know the library you are trying to use, but if you're not able to customize UI by provided means, you can always fall back to define your custom styles.

Notes: You will not be able to pass arbitrary colors but colors backed by classes you create in css styles (unless you find a way to do it with jquery in the appropriate moment).

Upvotes: 0

Related Questions