The developer control their styles using CSS classes and the reason for that it’s actually it’s really good that apex does this and and it it helps us consolidate some of our UI logic and into different CSS classes it helps promote reusability and and honestly it’s just kind of easier to maintain and if you have a lot of inline styles where you’re actually finding elements and applying different styles to them that can be a pain to kind of manage and work with now sometimes it’s necessary but that’s kind of you want to avoid going straight to that in in our case there’s actually a CSS class property that we’re going to leverage and and there are actually many predefined classes that you can use but you can always create your own class if and you have a specific color or specific requirement that needs to be met and the way that we’re going to do this is we’re going to use a case statement to adjust the CSS class for a given record so let’s go ahead and take a look and show you what I mean.
So the goal here is that we’re going to adjust and these different events so that they look different are they have a different color and why do I care if they have a different color well these are going to be these are actually different events types so Joe’s birthday that’s a birthday event discuss important issues that’s a meeting event and skill builders day is a holiday that I just created so we want these to be different colors let’s go ahead and edit our page and here’s one thing I just want to point out it if you’re new to apex 5 and you’re wondering where all the help text went and the easiest way to figure out how to customize or use something and is usually if you click on one of these properties over here on the right-hand side like for instance, I’m going to go find our CSS class property so I selected the attributes of our calendar region I found CSS class go ahead and click on that notice that it turned blue but nothing else really changed.
Well actually if I click on this help tag up here you can see that’s going to list out lots of very useful help information one of which is how to leverage a case statement to adjust the CSS class for a given record and so what we’re going to do is we’re going to modify our query so that we have some sort of column to leverage for this CSS class property so to do this we’re going to go ahead and we’re going to find our source query now we’re going to modify it okay and so what we’re going to say is um I believe this is birthday so if it’s a birthday we want you to use apex cow green if it’s a meeting we want it to be yellow and then if it’s scuba Thursday up we want this to be blue and then if you don’t fit any of these the default colors then going to be black okay save and run now you’ll notice that nothing happened just because we have that class or that column defined doesn’t mean that apex is going to use it.
We need to make sure that we configure our property to do that we’re going to navigate to the attributes and we can see that there is CSS class so it’s actually talking about the CSS class of a given event and very conveniently we have the CSS class column that we just defined we’re going to go ahead and save and run and there we have it we’ve adjusted the colors so that whenever we have a birthday it will display green a meeting will display yellow and a holiday will display in blue now what if we want to create our own color right so what if skill builders day we don’t want that blue we want kind of a darker blue well what we need to do is we need to add a CSS class to our page and so one thing that I want to point out is if I right click and I inspect element you can see right here we have apex cow blue that’s that color that was added and that’s the result of the column that we added and the properties that we configured on our calendar and we can also see over here on the right hand side.
And we can see oh the this is how this particular class is styled so what we can do is and we if we provide a name as instead of using apex cow blue but we kind of make up our own name and we kind of use a different background color border color and a text color we can very easily make up our own class so what I’m going to do is I have something already copied here good I’m going to go ahead and edit my page I’m going to navigate to my page attributes and I’m going to locate my CSS my inline CSS classes here are inline CSS property and I’m going to go ahead and I’m going to paste this in so you can see um I did some difference some different selectors have been added to the front of this but ultimately I made a class called SB blue and I pick the blue color I picked some different colors here to use and so what I’m going to do is I’m going to copy this name SB blue ok and I’m going to head on over to my query for my calendar and instead of using apex cow blue.
I’m going to go ahead and use SB blue because that’s what I just create it says ok and so just to refresh your memory this is what it looks like currently let’s go ahead and save and run and now you can see I kind of have this like almost kind of purply blue color so it is possible to create your own colors when trying to style it is possible to create your own colors when trying to a style events the next thing that we’re going to talk about is what if you want to actually style the different days is your calendar so at days that have already passed maybe you want them to be grayed out maybe future days you want them to be green right maybe you have some days that you would like to modify so it is possible to kind of add some modifications so previously we talked about styling events now we’re going to take a second and talk about how you can style the different days of your calendar.
So one thing that’s really cool about this new calendar region is that each day out each element on the page that represents a day and has a different set of CSS classes that describe it and so what do I mean by that well if you were to inspect the element on any given day in a calendar it’s going to have some of these particular classes that have been listed out here on below all of them are going to be defined as a day but some are going to be defined as sunday monday tuesday wednesday thursday friday saturday some are going to be defined as actually in a different month so if you’re currently looking at january and if a December date happens to display or a februari date happens to display it’s going to be flagged as another month and then lastly there’s kind of in reference to the current day if it’s not to the current day it’s going to have FC past and if it’s is the current day it’s going to be marked as today and if it’s sometime in the future it’s going to be marked as FC future.
Well, this is great because you can very clearly indicate or display whether or not something is in the past or the future as necessary so let’s go ahead let’s take a look-see how we can add style to indicate if something is in the past or something’s in the future and or kind of control if something is in a different month ok so this white color is nice it’s you know it’s very clean but sometimes you want to add styles or you want to color-code your calendar to provide some sort of significant meaning so let’s do that so what I have here okay right here and make this bigger here we go and is you can see that I’m targeting that the FC past so I’m going to go ahead and I’m going to say anything in the past and I want to be kind of this red color I’m going to go ahead and find anything that’s in the future I kind of wants to I want to give it this green color finally.
I’m going to say anything that’s today and I want to go ahead and highlight it at this yellow color and I’m going to talk about why then this last lines here in just a second let me go ahead and copy these first three styles let’s go ahead and take them into our application so again I’m going to go find the inline style section of my page here we go ahead and paste this so I’m saying if it’s the past and I I believe it was red the future is green and I’m just changing the color of what’s highlighted what today is to be kind of a yellowish kind of mustard color save all right okay so you could see the past is red today is yellow and the future is green now I also just want to point out that and we have the next month here which is februari and we have the previous month here which is December so I think it’s important to illustrate that those are actually different months and the easiest way to do that is to use that other date class.
So one thing that I want to point out is the order here is variant order so if i go ahead and let me find that style from earlier i say other month inherit and I come back here to my styles and I put it up here at the top say ok save run notice that nothing changed now here here’s a very quick example of why that didn’t actually do anything so whenever you’re working with CSS I want you to think about painting I wanted you to think of a painter trying to paint something on a pallet so if I the painter and I have kind of this this paintbrush here and I’m painting with let’s do orange and I’m painting with orange right that’s the first color so sequentially first I painted with orange now if I then come along and say well I want part of this to be pink well that’s exits to green I had to I had to apply that green second so if I did that in the other order uh how did green first and then orange and you would have never you would never be able to see the green because the orange would kind of cover it up.
So that’s kind of what we just that’s what we just implemented first and we found we kind of found the other months and apply to color to it and then we overwrote that and because at those days are that have the other month class also have the past and future so because we want the other month style to win out or to overwrite the past and future style we need to make sure that we apply that class second or after so this change is actually as easy as selecting the other month and then painting on the color of the other month and so this background color we’re just saying inherit which means we don’t want to actually provide a color we want you just to use the color of the parent element and you’ll see now that another month is kind of these other months now no longer are red or green respectively so we talked a little bit about and how CSS classes can provide a great amount of control over calendar regions.
There are many different types of classes that you can use to kind of color coordinate different parts of your calendar ranging from days of the week to more general things as if something is in the past or something is in the future and always remember that it is possible to create any custom CSS styles as needed so good luck and happy calendaring.