Fixed Column Widths in Resource FullCalendar

问题

I am using a special version of FullCalendar that supports Resource Views. http://tux.fi/~jarnok/fullcalendar-resourceviews/

I only have a couple of problems with it. It seems to automatically set the column widths, which I think applying this sort of addresses that:

.fc-widget-header
{
    width:100px;
}
.fc-widget-content
{
    width:100px;
}
.fc-resourceName
{
    background-color:aliceblue;
    width:150px;
}

Then the html writes that width of the cells is 100px, but it is still trying to auto fit everything.

What I want it to do is if it is too big, to h-scroll, but I always want each cell to be exactly 100px.

I have this style for scrolling:

#calendar
{
    overflow-x:auto;
}

But the elements are still showing up as variable widths based on the date. Here is what it looks like:

Clearly, each of my columns are not 100px as I have requested, and the resource columns are not 150px as requested. What can I do to get the desired look?

The other problem is there is no class defined for a new week. I would really like to show the columns where week X is written as different colors.

Any insight into either of these would be very helpful.

Thanks

回答1:

I think I had that problem before, putting this line on my calendar table worked for me.

#calendar table { table-layout: fixed; }

回答2:

I know that my solution is not related, but thanks for "overflow-x:auto;" this helped me to solve my problem.

This works for me with original fullCalendar + Scheduler in agendaView using column resources in vertical view like this:

@media (min-width: 1170px) {
    div.fc-view.fc-agendaDay-view.fc-agenda-view table {
        max-width: 100%;
    }
}
@media (max-width: 1170px) {
    div.fc-view-container {
        overflow-x: scroll;
    }
    div.fc-view.fc-agendaDay-view.fc-agenda-view table {
        min-width: 1170px;
    }
}

This way it was using the original min-width set to 120px for columns, is responsive but uses scrolling for extra size, so that it looks better on small devices.

回答3:

set

$('#calendar').fullCalendar({
 contentHeight: 'auto',
                aspectRation: 1.35,
})

This solve your issues

回答4:

For anyone searching for a solution in Vertical Resource View, this helped me:

.fc table{
    table-layout: auto;
}
.fc-view > table{  
    min-width: 0;
    width: auto;
}
.fc-axis{
    min-width:100px; /*the width of times column*/
    width:100px; /*the width of times column*/
}
.fc-day,.fc-resource-cell,.fc-content-col{
    min-width:300px;
    width:300px;
}

来源：https://stackoverflow.com/questions/15139527/fixed-column-widths-in-resource-fullcalendar

标签

css

fullcalendar