Sophisticated Calendar

[confis]

Hi,

Is there a way to get the Calendar to be more sophisticated

1. differentiate by colour code for different type of leave. E.g. annual leave = red colour, Medical leave = yellow colour, off-in-lieu = green colour)
2. Clear indication on the leave duration (half day morning, half day afternoon, full day)

Example as follow:

Thanks
Yaniv

 

[troester]

Use the status element, it will add a class where you can assign CSS as you like.
Use e.g. a calc element to get the classes you need (something like morning, afternoon, full)

This will insert classes 'morning statusmorning' (I think, if your element is called status)
and you can add custom css e.g.
.statusmorning {background:linear-gradient(to right, rgba(231,56,39,1) 50%, rgba(231,56,39,0) 50%)}

 

[confis]

Thank you ,

just to clerifaythe status is at the calender plage in right?


then to add CSS at the code or at the element ?

 

[troester]

Yes.
You can add a file custom.css in plugins\fabrik_visualization\fullcalendar\views\fullcalendar\tmpl\bootstrap\
or you can add the css to your Joomla template.

 

[confis]

this is the css i need to use ?

{$view}_$c #fab_leave_tracking___duration {
background: green;;
}

 

[troester]

No.
custom.css is not a php file creating CSS (like the custom_css.php in form/list templates), you can't use variables.
The calendar is inserting classes 'ValueOfStatusElement' and 'statuselementnameValueOfStatusElement'
So if your status element name is 'duration' and you are calculating values 'morning', 'afternoon' your CSS would be
.morning {background:....}
or
.durationmorning {background:....}

Use your browser dev tool to examine the CSS (rightclick on the calendar entry, something like 'inspect element')

 

[confis]

Ok understood,
but what do you mean by calculating values?
my selection of the value done by radio box and not by calc element
do i need to specifay the value of the label on the css or the

 

[confis]

this is the cssstyle="background-color: rgb(201, 36, 36); cursor: pointer; margin-left: 0px; top: 284px; position: absolute; border-color: rgb(102, 102, 102) currentcolor; border-style: solid none; border-width: 1px 0px; border-image: none 100% / 1 / 0 stretch; -moz-border-top-colors: none; -moz-border-left-colors: none; -moz-border-bottom-colors: none; -moz-border-right-colors: none; overflow: auto; opacity: 0.6; padding: 0px 4px; max-width: 176px;"

what is the element name ?

fabrikEvent label 0.5

 

[troester]

Ah, I though it's a calc element, but it doesn't matter which element type.

You must change your values, you can't use a "." in a CSS class.
Classes starting with a number are also no valid CSS but for these cases Fabrik is creating the 'elementValue' class.
So best is to use a simple string as value, e.g. full, half
Then you can do
.full {...}

If you need numbers (e.g. for a calculation elsewhere) you must use integers (e.g. 2 - One or more days, 1 - Half day) and then use the classes with the element name (assuming duration is your element name)
.duration1 {...}

 

[troester]

Posts crossing...
So you are using the old calendar viz? (I think it's deprecated, the new calendar viz is full_calendar)
This is not adding the element name, you MUST use valid CSS classes as values of your status element.

 

[cheesegrits]

Don't use the old calendar viz, it's deprecated, no work has been done on it in for 2 years, and I'll be removing it entirely soon. Use the new fullcalendar one. Should be easy enough to move to the new one, the settings are very similar.

-- hugh

 

[confis]

I am change to the full calender
but there is few issue with it

when i select diffrent color for the event - it show the lower color as the other tabke event

 

[confis]

I am change to the full calender
but there is few issue with it

when i select diffrent color for the event - it show the lower color as the other tabke event
View attachment 16700

View attachment 16701

Ah, I though it's a calc element, but it doesn't matter which element type.

You must change your values, you can't use a "." in a CSS class.
Classes starting with a number are also no valid CSS but for these cases Fabrik is creating the 'elementValue' class.
So best is to use a simple string as value, e.g. full, half
Then you can do
.full {...}

If you need numbers (e.g. for a calculation elsewhere) you must use integers (e.g. 2 - One or more days, 1 - Half day) and then use the classes with the element name (assuming duration is your element name)
.duration1 {...}

 

[confis]

HI,
I use this CSS to get what i want

.fc-content
{
background:linear-gradient(to right, rgba(255,0,0) 50%, rgba(255, 255,255) 50%)

}

its working well on the inspector but when i use the custom.css on the site (/plugins/fabrik_visualization/fullcalendar/views/fullcalendar/tmpl/bootstrap/custom.css) its not reflecting on the website

 

[troester]

background:linear-gradient(to right, rgba(255,0,0) 50%, rgba(255, 255,255) 50%)
is not valid

background:linear-gradient(to right, rgba(255,0,0,1) 50%, rgba(255, 255,255,1) 50%)

 

[confis]

Thank you troester,
with one css .fc-content its working well
please help me understand the way i need to use the Duration element (how to use it to apply to the custom.css)
this is how i want me element css color to work

.fc-content_first_half
   {
  background:linear-gradient(to right, rgba(255,0,0,1) 50%, rgba(255, 255,255,1) 50%)

  }
.fc-content_secound_half
   {
  background:linear-gradient(to right, rgba(255,255,255,1) 50%, rgba(255, 0,0,1) 50%)

  }
.fc-content_full_day
   {
  background: rgba(255,0,0,1)

  }

But i am not clear how to implement it with my Duration element (radio)+ Select Part (radio) to reflect on the calender



Thank you

 

[cheesegrits]

The credentials in your My Sites don't seem to work ("blocked or not activated yet"). Can you activate the account, so I can take a look.

-- hugh

 

[troester]

You can only have one status element (per list).
So you need e.g. Duration: full_day, first_half, second_half

The classes are added to the parent <a tag
So if you want to style only the .fc_content <div you can do
.first_half .fc-content
{
background:linear-gradient(to right, rgba(255,0,0,1)50%, rgba(255,255,255,1)50%)

}

 

[confis]

The credentials in your My Sites don't seem to work ("blocked or not activated yet"). Can you activate the account, so I can take a look.

-- hugh

added it
leave-manager.com

thank you

 

[confis]

Ok,
I have changed the css per your recommendation now its look like this

.half_day .fc-content
    {
background:linear-gradient(to right, rgba(255,0,0,1)50%, rgba(255,255,255,1)50%)
    }
.full_day .fc-content
    {
    background: rgba(255,0,0,1)
    }

my question is

.half_day
.full_day

need to come from the element value?



or i can use calc element to fet the values from this duration
fab_leave_tracking___duration element + fab_leave_tracking___select_part element
and use this as status at the calender