Only see days in a month

Scheduler Javascript
#1

Hi guys,

I would like in my month view only see days of month.
For example in November only see the 1 to 30 and not previous 27-28-29-31 of October etc…

How can i do that ? Thanks !

#2

Hi,
cells with days of previous and next month has .dhx_before and .dhx_after css classes. You can add some style to prevent them from showing.
Also you can define a filter in order to show only events of the current month
docs.dhtmlx.com/scheduler/filtering.html
docs.dhtmlx.com/scheduler/api__s … state.html

#3

Hum it’s a pretty bad solution… if the user click on next or previous month on the view the hide on the css class doesn’t work anymore.
And i can filter event because user can change the month and i don’t do a request for each change, i just load a big one time.

There’s no property for doing that simply, just show days in actual month on the view ? :open_mouth:

#4

If you add a css that hides the elements inside a dhx_before and dhx_after elements, it will work regardless the user actions
The client-side filters are also applied each time scheduler displays the data, so it also will always work.

Please paste some code that you’ve tried so i could check what is not working

#5

This is a part of my code :

p.initSchedulerVisiteClient = function(idEntite=null,idClient=null){
	scheduler.config.first_hour = 9;
	scheduler.config.last_hour = 18;
	scheduler.config.server_utc = false; 
	scheduler.config.multi_day = true;

	scheduler.config.readonly = true;
	scheduler.config.xml_date="%Y-%m-%d %H:%i:%s";
	scheduler.templates.event_class=function(s,e,ev){ return ev.custom?"custom":""; };
	
	scheduler.attachEvent("onClick", function (id,e){
	    $(".dhx_cal_quick_info").hide();
	    window.open("form_visite.php?ID="+id);
	})
	
	scheduler.attachEvent("onTemplatesReady", function(){
	    scheduler.templates.event_class=function(start,end,event){
	    	return event.color;
	    }
	}); 

	
	scheduler.config.show_loading = true;
	
	scheduler.locale.labels.year_tab ="Année";

	scheduler.init('scheduler_planning',new Date(),"month");
	p.loadSchedulerVisiteClient(idEntite,idClient);
	$(".dhx_before").hide();
}

This function is just call on time when the page load.

#6

Hi,
if you hide not needed cells via JS, you’ll need to do it each time calendar is refreshed. The easier way is to do the same with css:

.dhx_before div, .dhx_after div{ color:transparent !important; border-right:transparent; }
Note that month is displayed as a grid with days of week horizontaly. So you can’t set display:none to not needed elements as it will shift the other cells to wrong positions. The way to do is to either use visibility:hidden or make content of the cell transparent.

You’ll probably need to restore the border of the first displayed cell, so the full code is following:
JS:scheduler.templates.month_date_class = function(date){ var month_start = +scheduler.date.month_start(scheduler.getState().date); if(+date < month_start && + scheduler.date.add(date, 1, 'day') >= month_start){ return 'month_start'; } return ""; };
CSS:[code].dhx_before div, .dhx_after div{
color:transparent !important;
border-right:transparent;
}

.dhx_before.month_start div{
border-right:1px solid #CECECE !important;
}[/code]

#7

Hi, thanks for your reply !
It works :smiley: but there’s always event show, how can i hide them on this days hidden ?

#8

you’ll need to define a filter function for the month view
docs.dhtmlx.com/scheduler/filtering.html

#9

Great ! Thanks for your help !
This is my last function :

scheduler.filter_month = function(id, event){
		var month_start = +scheduler.date.month_start(scheduler.getState().date);
		var month_end = +scheduler.date.add(month_start, 1, 'month');
		if(+event.start_date < month_start || +event.start_date > month_end){
			return false;
		}
		else
			return true;
	}

It works !