1. Fabrik 3.9 has been released. If you have updated Joomla to 3.9, this is a required update.
    Dismiss Notice

Calendar Viz - colour of events

Discussion in 'Community' started by ontarget, Jan 12, 2019.

  1. ontarget

    ontarget Member

    Level: Community
    Hi I have setup a calendar viz.
    I am trying to change the colour of individual entries based on the value of a dropdown.
    I am using the status element setting in the Calendar Viz and have tried the following

    Dropdown element
    example values: csl, pdst, ippn

    then in custom.css
    plugins/fabrik_visualization/fullcalendar/views/fullcalendar/tmpl/bootstrap/custom.css

    Code (CSS):

    .csl {
    color: blue;
    }

    .pdst {
    color: pink;
    }
    This did nothing despite clearing caches etc

    Attempt 2 php css file:
    plugins/fabrik_visualization/fullcalendar/views/fullcalendar/tmpl/bootstrap/custom_css.php

    PHP:
    header('Content-type: text/css');
    $c = $_REQUEST['c'];
    $id = $_REQUEST['id'];
    echo <<<EOT
    .csl {
    color: blue;
    }

    .pdst {
    color: pink;
    }

    EOT
    ;
    Again no change :(

    Attempt 3 using a dbjoin element called "organisation"
    "csl" id value in table= "1"

    So in custom_css.php:
    .organisation_id1 {
    background-color: blue!important;
    }

    Harrrumph still no joy.

    I have been looking at this forum thread for inspiration also cant find anything in the wiki about the status element.
    http://fabrikar.com/forums/index.ph...alendar-viz-for-css-use-and-templating.45692/
    Any pointers on this please?
     
  2. ontarget

    ontarget Member

    Level: Community
    Hi I have made some progress on this.
    My idea is to make it easier for logged in users to manage their own events in the calendar by colour coding events that they "own"
    The css was added to my J! templates custom.css file like this

    Code (CSS):

    .yes
    {
    background-color: #ff0000!important;
    }
    .no
    {
    background-color: rgb(91, 82, 255)!important;
    }
     
    To colour code events based on wether the user is logged in or not I created a calc field with an ajax trigger

    PHP:
    $userid = '{aaa_calendar___current_user}';
    if ($userid == {$my->id})
    {
    return 'yes';
    }
    else
    {
    return 'no';
    }
     
    It works when i save the record - the event turns red - the "yes" colour.
    What i was hoping was that when you log out the event turns to the "no" colour (unfortunately it stays red!)
     
  3. ontarget

    ontarget Member

    Level: Community
    I have tried the following with no luck either - would appreciate if anyone could let me know if this is possible or not - if possible i can take out a pro sub to get this sorted!
    I have a calc element called "loggedin" which is set to not save to the DB
    PHP:
    $user = JFactory::getUser();
    $status = $user->guest;

    if($status == 1){
    //do user logged out stuff
    return 'no';
    }
    else
    {
    //do user logged in stuff
    return 'yes';
    }  
    The value "yes" or "no" shows in the list if the user is logged in or not as it is being triggered by calc ajax.
    the status element in the Calendar Viz points to the "loggedin" element and the corresponding css
    Code (CSS):
    .yes
    {
    background-color: red!important;
    }
    .no
    {
    background-color: blue!important;
    }
    Despite the list changing status to Yes or No the calendar colours do not!
    As i understand the status element in the Calendar Viz has to have a value in the DB in order to render the css. so my thinking would be to change the "loggedin" element value in the DB on the fly - is this possible?
     
    Last edited: Feb 2, 2019
  4. ontarget

    ontarget Member

    Level: Community
    Based on my previous post i tried adding the following to the "loggedin" calc element - i'm trying to get the logged in field to change to Yes based on whether a person is logged in or not.
    PHP:
    $userid = '{aaa_calendar___current_user}';
    $user = JFactory::getUser();
    $status = $user->guest;

    if($status == 1){
    //do user logged out stuff
    return 'no';
    }
    else
    {
    //do user logged in stuff
    $myDb = JFactory::getDbo();
    $myQuery = $myDb->getQuery(true);
    $myQuery
        ->update('aaa_calendar')
        ->set('logged_in_id = yes')
        ->where('current_user = $userid');
    $myDb->setQuery($myQuery);
    $myDb->execute();
    //var_dump($myQuery); exit;

    }
     
    Result = 500 Fabrik has generated an incorrect query for the list ... :(

    ALSO HOW DO I TAKE OUT A PRO SUB? Cant find the payment page anymore
     
    Last edited: Feb 2, 2019
  5. troester

    troester Well-Known Member Staff Member

    Level: Community
    Pro sub: may be here https://fabrikar.com/help-center

    Color for logged in/ not logged in:
    ...set('logged_in_id = "yes"')...
    But I think you can't do this with settings in the DB, these are the same for all users. What should happen if two users are logged in? The records of both would be marked with yes.

    You could do something like
    use your userid element as status (this will add a class your-element-nameUserid e.g. userid415)

    then create a custom viz template and define CSS directly in default.php
    echo '<style> .userid' . $myuserid . ' {background:red} </style>';
     
  6. ontarget

    ontarget Member

    Level: Community
    Hi Troester
    Sorry didn't get back to you and thank you for your reply.
    I have tried your suggestion.
    I set my logged in user id as status in the calendar viz.

    (Logged in calc element from user element field)
    $userid = '{aaa_calendar___current_user}';
    return $userid;
    Result = 621

    The date entry in the calendar css looks like:
    a.fabrikEvent.label.621

    The only way it seems I can change the style of the calendar entry based on user id is by using unicode( as they are numerical) see https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/.
    So if i hardcode into CSS
    /plugins/fabrik_visualization/calendar/views/calendar/tmpl/mycal/template.css
    a.\36 21 {background:red!important;}

    This works perfectly

    I'm not sure how i would write that in php in the default.php file
    public_html/plugins/fabrik_visualization/calendar/views/calendar/tmpl/mycal/default.php
    e.g
    echo '<style> a.\3'. $userid . ' {background:red!important;} </style>';

    Doesn't work - any ideas about escaping that unicode correctly if that is the issue?
     
  7. troester

    troester Well-Known Member Staff Member

    Level: Community
    If you select your userid element (assuming it's named userid) as "Status element" in the viz you'll get a class
    userid123 (element name prepended because of these "class must start with character" restriction)
    in the "outer" <a (with class fc-...-event)

    upload_2019-2-12_13-19-38.png

    I can't see a status class added to the "inner" <a (fabrikEvent...) in my fullcalendar.

    So it shouln't be necessary to escape anything.
     
  8. ontarget

    ontarget Member

    Level: Community

    Attached Files:

  9. troester

    troester Well-Known Member Staff Member

    Level: Community
    Are you really using the fullcalendar viz? or the old calendar viz?

    You mentioned fullcalendar in your first post
    then in custom.css
    plugins/fabrik_visualization/fullcalendar/views/fullcalendar/tmpl/bootstrap/custom.css
     
  10. ontarget

    ontarget Member

    Level: Community
    You are a legend! I assumed "calendar" plugin was fullcalendar - i went through plugin discover and found fullcalendar! ok i'll try and sort it now! Thanks so much
     
  11. ontarget

    ontarget Member

    Level: Community
    Update: ok i have tried adding my echo statement on line 2 of
    public_html/plugins/fabrik_visualization/fullcalendar/views/fullcalendar/tmpl/mycal/default.php
    echo '<style> .logged_in_id'. $userid .' {background:green!important;} </style>';

    (Logged in calc element from user element field)
    $userid = '{aaa_calendar___current_user}';
    return $userid;
    Result = 621

    Hardcoding the value works
    echo '<style> .logged_in_id621 {background:green!important;} </style>';

    but its not picking up my $userid variable - does this need to be declared in default.php too?
     
  12. ontarget

    ontarget Member

    Level: Community
    Ok I worked it out by declaring the j!user id in
    public_html/plugins/fabrik_visualization/fullcalendar/views/fullcalendar/tmpl/mycal/default.php
    $user =& JFactory::getUser(); $userid = $user->get('id'); echo $userid;
    echo '<style> .logged_in_id'. $userid .' {background:green!important;} </style>';
    Thanks Troester
     

Share This Page