How to display a Resource View day when there are no resources for that day

[seankenny]

PR 3f75a1db13a49f4ae0bf62906ee0c858ca9f24cc highlighted an issue where the Resource view fails to render correctly when there are no resources for that day. See the PR history for a commentary on the causes.

[zvictor]

I am working on this now. Do you have any clue on how to fix it?

[zvictor]

Render of no events of buildDayTableHTML() on a day view:

<table style='width:100%' class='fc-agenda-days fc-border-separate' cellspacing='0'>
<thead><tr><th class='fc-agenda-axis fc-week-number fc-widget-header'>W23</th><th class='fc-sun fc-col0 fc-widget-header'>Sunday</th><th class='fc-agenda-gutter fc-widget-header'>&nbsp;</th></tr></thead>
<tbody>
  <tr>
    <th class='fc-agenda-axis fc-widget-header'>&nbsp;</th>
    <td class='fc-col0 fc-sun fc-widget-content fc-past'><div><div class='fc-day-content'><div style='position:relative'>&nbsp;</div></div></div></td>
    <td class='fc-agenda-gutter fc-widget-content'>&nbsp;</td>
  </tr>
</tbody></table>

and on resoureDay view:

<table style='width:100%' class='fc-agenda-days fc-border-separate' cellspacing='0'>
<thead><tr><th class='fc-agenda-axis fc-week-number fc-widget-header'>W23</th><th class='fc-agenda-gutter fc-widget-header'>&nbsp;</th></tr></thead>
<tbody>
  <tr>
    <th class='fc-agenda-axis fc-widget-header'>&nbsp;</th>
    <td class='fc-agenda-gutter fc-widget-content'>&nbsp;</td>
  </tr>
</tbody></table>

We are missing the creation of .fc-col0

[zvictor]

... and it happens because inside buildDayTableBodyHTML() we have different values for colCnt. It is 0 in resourceView and 1 in dayView.

[seankenny]

Keep in mind that there are some seriously big internal HTML & css changes headed our way on the skeleton branch of the upstream so I think we probably should not put too much effort into this one.

I wonder if setting a dummy resource to "No resources found" or similar would be an option? Setting the calendar to a read only mode would prevent any interaction for days with no resources. Something similar to this plunkr - http://plnkr.co/edit/0pSW1jrZbAOzigsfXutN

An issue might be the translation into various languages and retaining the initial values of the various edit options.

Thoughts?

On 21 August 2014 09:37, zVictor notifications@github.com wrote:

I am working on this now. Do you have any clue on how to fix it?

— Reply to this email directly or view it on GitHub https://github.com/seankenny/fullcalendar/issues/24#issuecomment-52893021 .

[seankenny]

OK so that css class is used for the border width:

.fc-agenda-days .fc-col0 { border-left-width: 0; }

Maybe we can leave this one alone for now? Like I said, take a look @ the https://github.com/arshaw/fullcalendar/tree/skeleton branch that will be v2.1 release I think....

[caseyjhol]

This is a simple fix, if anybody is still curious. The for loop within buildDayTableBodyHTML() is:

for (col=0; col<(colCnt||1); col++) {
...
}

but the for loop within buildDayTableHeadHTML() is:

for (col=0; col<colCnt; col++) {
...
}

Change the for loop to:

for (col=0; col<(colCnt||1); col++) {
    var resource = resources()[col];
    var classNames = [
        'fc-col' + col,
        headerClass
    ];

    if (resource && resource.className) {
        classNames.push(resource.className);
    } else {
        resource = {
            name: ''
        };
    }

    html +=
        "<th class='" + classNames.join(' ') + "' title='" + htmlEscape(resource.name) + "'>" +
        htmlEscape(resource.name) +
        "</th>";
}