Change Calendar style

Support
#1

Hi there,

I am experiencing some difficulties to make some look changes to week calendar such as:
1 - Set the Event color - Do I need to create this class v-calendar-event.event-red on css? If yes, in which file?
2 - Separate the (v-calendar-header-week) from the v-calendar-week-wrapper to maintain the header week part fixed on Top and had a vertical scrollbar to the week wrapper. This will allow to have taller/wider hour cells and scroll to later hours.
3 - On v-calendar-day-times create a vertical Line to make more visible the day columns.
4 - Remove hours info form event. Just need the caption info.
5 - Add Icons to events like traffic lights;

Thanks for advance for all support.

#2

Hi,

  1. You’re right, you need to define custom styles and assign style name to an event as shown in our Sampler app. You can read more about extending an existing theme in the documentation.
  2. Out of the box, there is no possibility to implement such functionality. It requires deep customisation of the component.
  3. For instance, you can use the following styles:
.v-calendar-day-times {
  border-left: 1px solid black;
}
  1. It depends on which calendar representation do you use
    For the monthly representation you can add the following styles:
.v-calendar-event-month .v-calendar-event-time {
  display: none;
}

For the daily and weekly representations the following:

.v-calendar-event-caption {
  span, br {
    display: none;
  }

}
5. Could you describe in more details your needs? For instance, the monthly calendar shows such icons by default. Do you want to add something like that to another type of calendar?

Regards,
Gleb

#3

Hi Gleb,

Thanks for your reply.

Below my issues:

  1. I already extended Halo Theme. Where i am having difficulty is to identify where to put the custom styles. Which file? (app-component.scss, halo-ext.scss, halo-ext-defaults.scss, styles.scss or other)?
    I am assigning events through Datasource and have a colum StyleName that is mapped to its property.
    Once solutions for points 3 and 4 worked. I pasted your code in the halo-ext-defaults.scss file i am wondering if the problem is somewhere else. For example the value i am saving int StyleName Event Column (I alreadey tried event-green).

  2. Solved.

  3. Solved.

  4. I have some attributes like, Subscription Expired (payment needed), Measure Day, Session is a trial. And its easy if staff can see directly in the event icons that alert him to that information.
    The calendar is always in week mode.

I attach an image with some example of the needs.

Kind regards,
João F.

#4
  1. As the Creating new styles section of the documentation says, you need to place your custom styles in the halo-ext.scss file. Or if you familiar with SCSS approach, you can create separate files with mixins and just include them inside halo-ext.scss. Examples of styles for weekly calendar events you can find in our sample, see styles.scss tab.
  2. Okay, for a weekly calendar you can use a style like below:
.v-calendar-week-wrapper .v-calendar-event-caption:before {
  content: "\25cf"; // Unicode value of font awesome icon
  margin-right: .2em;
}

Regards,
Gleb

#5

Hi Gleb,

  1. Solved.
  2. It is not quite this, but I understood your approach.

Thanks for all support.
It was very helpul.

Kind regards