Another View Option to Resource Calendar

[rgibson]

Looking for a weekly view in the calendar for a couple scheduling apps that does display the hourly time, simply the 7 day week.

[SuiteUpstairs]

I second this suggestion. The “Week” view is not useful. only one or two days fits on the screen and to scroll to the right you have to scroll down to the bottom first to find the scroll bar and then you can’t see the resources at the top when you are scrolling to the right.

Only one or two days shows on the screen

Resource default height is too high, we have to scroll down until the resources disappear.

[Renzo]

Hi there, we also came across this and I reckon everyone who uses the resource calendar will.

We wanted to build a table with items to be planned below the resources but that is not possible due to the length on the screen.

To get more out of the screen we also want to suggest to use ’ working hours’ to show i.e. only 8-5 and not the whole day. This will also help to show more of the week.

[Chem]

@rgibson @SuiteUpstairs @Renzo

We have plans to add more options to the resource component but for the time being, I’ll show you how to set some of the above-mentioned using custom code.

To set the Min and Max time for the week and day view. (For example, if you want to only show work hours 9-5)

You may add the following to the JavaScript section of the page.

FullCalendar.globalDefaults.minTime = "09:00";
FullCalendar.globalDefaults.maxTime = "18:00";

You can also disable weekends from being displayed by adding the following to the JavaScript as well

FullCalendar.globalDefaults.weekends = false;

As far as the height goes, we’ll add this as an option to customize as well but if you’d like you may add the following to the CSS section of the page.

.fc-view{
    height: 300px;
}
.fc-view-container{
    height: 450px;
}

This is how the resource component ends up looking after adding all of the above.

[Chem]

@Renzo You can also change the locale default by adding the following to the JavaScript as well

FullCalendar.globalDefaults.locale = 'nl';

The following options can replace ‘nl’.

"en","af","ar-dz","ar-kw","ar-ly","ar-ma","ar-sa","ar-tn","ar","az","bg","bs","ca","cs","cy","da","de-at","de","el","en-au","en-gb","en-nz","eo","es","et","eu","fa","fi","fr","fr-ch","gl","he","hi","hr","hu","hy-am","id","is","it","ja","ka","kk","ko","lb","lt","lv","mk","ms","nb","ne","nl","nn","pl","pt-br","pt","ro","ru","sk","sl","sq","sr-cyrl","sr","sv","ta-in","th","tr","ug","uk","uz","vi","zh-cn","zh-tw"

I’m not sure why changing the global default locale doesn’t update the Day, Week, and Month button text, but here’s some JavaScript you can add to change these as well to custom values.

For example, if my Resource component has the component ID of ‘component_3’ (this can be found by hovering over the info button as shown in the image below)

Remember to change component_3 to your resource component ID

TB.render('component_3',function(){
    $('.fc-resourceTimelineDay-button').html('Dag'); // Day
    $('.fc-resourceTimelineWeek-button').html('Week 2'); // Week
    $('.fc-resourceTimelineMonth-button').html('Maand'); // Month
});

[Renzo]

Whilst on it to keep all the settings of the resource component in one place hereby the settings for the weeknumbers too:

FullCalendar.globalDefaults.weekNumberTitle = 'Week';
FullCalendar.globalDefaults.weekNumberCalculation = 'ISO';
FullCalendar.globalDefaults.weekNumbers = true;

Regards,
Renzo

[SuiteUpstairs]

Thank you @Chem for these tricks, it definitely makes the resource calendar way more useful. I have a couple of more favours to ask Is there a way to make the line between days thicker? right now it’s hard to tell when one day ends and the next day begins, especially on some monitors.

Also, on the Day view is there a way to show what day of the week is displaying? M,T,W,T,F etc.

[tim.young]

@rgibson @SuiteUpstairs @Renzo

For changing the time slot to 1 day, please see this post

@SuiteUpstairs

Also, on the Day view is there a way to show what day of the week is displaying? M,T,W,T,F etc.

FullCalendar.globalDefaults.slotLabelFormat = [
  { month: 'long', year: 'numeric' }, // top level of text
  { weekday: 'long' } // lower level of text
];

[Marty]

@Chem

.fc-view{
    height: 300px;
}
.fc-view-container{
    height: 450px;
}

This isn’t working for me unless I added overflow: auto to the fc-view class. The issue with that is I still had to scroll thru the overflow to reach the horizontal scroll bar.

Adding this resolved that issue for me:

.fc-scroller{
    max-height: 250px;
}

I also added the following to preset the width of the resource label column

.fc-resource-area{
    max-width: 5%;
    overflow: auto;
}