Skip to main content

Hi all,

So we have a page with a dedicated Catalog widget displayed full width as calendar.  This works great for firm-wide training, so people can see everything that is upcoming, regardless of whether it is legal, L&D or technology training.

I’ve been asked by a department if they can have it on their departmental page, but only half width.  When I do this, it changes to the smaller version with the dot to indicate something is happening.

My question is this…

Is there a way to make it show the same as full width, but in half width, and also, is there a way of removing the weekends from the calendar?

@Neil Patterson 

I managed to pull the weekends out in a ½ display but it does not create enough space to render the items as it does in the full width version. Still has the dots.

If you would still like to play with this - here is the code I used.

As always - test thoroughly for conflicts.
You may need to verify this one over the course of at least a week and over a month to month transition as well to make sure that things continue to work as expected.

/** Hide the weekends for monthly view calendar widget **/
/** Change your particular widget ID as appropriate **/

/** Removes the Day of the Week header **/
#doc-widget-172 mycalendar-widget div.cal-cell.cal-past.cal-weekend.ng-star-inserted {
    display: none;
}
#doc-widget-172 mycalendar-widget div.cal-cell.cal-future.cal-weekend.ng-star-inserted {
    display: none;
}
#doc-widget-172 mycalendar-widget div.cal-cell.cal-today.cal-weekend.ng-star-inserted {
    display: none;
}

/** Removes the Sundays in the past **/
#doc-widget-172 mycalendar-widget div.cal-days-inner div:nth-child(1) .cal-past.cal-weekend.cal-in-month.ng-star-inserted {
    display: none;
}
#doc-widget-172 mycalendar-widget div.cal-days-inner div:nth-child(1) .cal-past.cal-weekend.cal-out-month.ng-star-inserted {
    display: none;
}

/** Removes the Saturdays in the past **/
#doc-widget-172 mycalendar-widget div.cal-days-inner div:nth-child(7) .cal-past.cal-weekend.cal-in-month.ng-star-inserted {
    display: none;
}
#doc-widget-172 mycalendar-widget div.cal-days-inner div:nth-child(7) .cal-past.cal-weekend.cal-out-month.ng-star-inserted {
    display: none;
}

/** Removes the Sundays in the future **/
#doc-widget-172 mycalendar-widget div.cal-days-inner div:nth-child(1) .cal-future.cal-weekend.cal-in-month.ng-star-inserted {
    display: none;
}
#doc-widget-172 mycalendar-widget div.cal-days-inner div:nth-child(1) .cal-future.cal-weekend.cal-out-month.ng-star-inserted {
    display: none;
}

/** Removes the Saturdays in the future **/
#doc-widget-172 mycalendar-widget div.cal-days-inner div:nth-child(7) .cal-future.cal-weekend.cal-in-month.ng-star-inserted {
    display: none;
}
#doc-widget-172 mycalendar-widget div.cal-days-inner div:nth-child(7) .cal-future.cal-weekend.cal-out-month.ng-star-inserted {
    display: none;
}

/** Removes Sunday if it is the current day **/
#doc-widget-172 mycalendar-widget div.cal-days-inner div:nth-child(1) .cal-today.cal-weekend.cal-in-month.ng-star-inserted {
    display: none;
}
#doc-widget-172 mycalendar-widget div.cal-days-inner div:nth-child(1) .cal-today.cal-weekend.cal-out-month.ng-star-inserted {
    display: none;
}

/** Removes Saturday if it is the current day **/
#doc-widget-172 mycalendar-widget div.cal-days-inner div:nth-child(7) .cal-today.cal-weekend.cal-in-month.ng-star-inserted {
    display: none;
}
#doc-widget-172 mycalendar-widget div.cal-days-inner div:nth-child(7) .cal-today.cal-weekend.cal-out-month.ng-star-inserted {
    display: none;
}

Hope this is helpful.

I’ve not found any way to render anything less than the full width as the larger detailed view for each day - when it goes less than full width it goes to the dot view. 

@gstager - the CSS whizz does it again!  Thank you so much!  That has solved half my problem (once I have tested to make sure it works as expected).

@Jamie at GuyKat - This is what I found.  Even at 2/3rd width where (in my opinion) there is loads of space for it to be full detail.  Really annoying! 😀

Thanks both.  I’ll go back to the department and tell them they have to put up with full width or the dots, at least (potentially) we can ditch the weekends!

@Neil Patterson - I am interested in knowing how well it works out. 🤞🏼

The problme I always ran into in these types of solves is it works when you have a full screen page and the full half size is shown, but as soon as you start reducing its a mess. The built in calendar has so many issues like this. End up almost always building a custom one that gives full control for each need.

related. Am I the only one who has learners reporting that when they import an ILT calendar into outlook they get a calendar with the internal ID number instead of a class name?

Thanks @gstager I’m hoping this will make our calendar much more user friendly. 

Hi I’ve just tried this and I’m not sure if it’s an update to the Docebo code or user error (Ie I got the widget id or code wrong), but it’s not working for me. Has anyone tried this recently and can verify?

Also has anyone tried to reduce the hours in a day that it shows? We won’t be having any meetings at 3am.

Reply


Terms & ConditionsCookie settings