Reputation: 734
I am using fullcalendar to implement a schedule for a school where the classes are in specific days for the entire month, for example a class can be on TTH or MWF, TWTH etc.
I am trying to implement a week view but I want to navigate month by month so I don't have to display the same class every specific day on the entire month (on month view). Inspired by this question I tried to implement the following:
$('#calendar').fullCalendar({
defaultView: 'customWeek',
views: {
customWeek: {
type: 'week',
duration: {months: 1}
}
}
});
but this implementation did not force the view to start on the beginning of the month, so if I navigate through the calendar the next view will start on the second day of the month or the third, or sometimes on the last day of the previous month.
I also tried to make it work with CSS on month view so it looks like a week view:
.fc-day-top .fc-day-number{
display: none;
}
.fc td {
border-bottom: 0 !important;
border-top: 0 !important;
}
.fc-head {
border-top: 1px solid black !important;
border-bottom: 1px solid black !important;
}
.fc-body{
border-bottom: 1px solid black !important;
}
but I lost the time slots at the beginning of the calendar and the events are stuck at the top of it and they look bad.
So I am searching for the best approach to complete this task.
Upvotes: 1
Views: 1606
Reputation: 33943
That one was fun! So the trick is to hide the .fc-week
rows we don't want to see in a month view. Then, we don't have to mess with the normal navigation.
To do this, we have to target which row we want to see. I made 2 options here:
It can be "switched" in code using two booleans. It is now setted for the second option.
Feel free to ask for any question! ;)
// Switches about what to display
// Use only one of the two to true.
var FIND_first_full_week = true;
var FIND_first_day_of_month = false;
$("#calendar").fullCalendar({
viewRender: function(){
var ShowWeek;
var weeks = $(".fc-week");
// Find the first day of the month
if(FIND_first_day_of_month){
for(i=0;i<weeks.length;i++){
var days = weeks.eq(i).find(".fc-day-number");
days.each(function(){
if( $(this).html()=="1" && !$(this).parent().is(".fc-other-month") ){
ShowWeek = i;
}
});
}
}
// Find first full week of the month (no day in past month)
if(FIND_first_full_week){
for(i=0;i<weeks.length;i++){
var firstFullWeek = false;
var dayCount=0;
var days = weeks.eq(i).find(".fc-day-number");
days.each(function(){
if(!firstFullWeek){
if( !$(this).parent().is(".fc-other-month") ){
dayCount++;
if(dayCount==7){
firstFullWeek = true;
ShowWeek = i;
i = weeks.length;
}
}
}
});
}
}
// Fix FullCalendar display!
setTimeout(function(){
weeks.not(weeks.eq(ShowWeek)).css({"display":"none"});
var weekHeight = weeks.height();
$(".fc-day-grid-container").css({"height":weekHeight});
},10);
}
});
/* Your CSS */
.fc td {
border-bottom: 0 !important;
border-top: 0 !important;
}
.fc-head {
border-top: 1px solid black !important;
border-bottom: 1px solid black !important;
}
.fc-body{
border-bottom: 1px solid black !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<div id="calendar"></div>
Upvotes: 2