Is there a way to customize scheduler to look like this?

Scheduler Javascript
#1

I would like to have a scheduler that is like the month view but only 1 week at a time… Then I went it to have a next and previous button to scroll through the weeks. I feel like this should be possible but I can’t find any examples like this.

Something like this but with arrow controls - i.imgur.com/m4LGAUZ.png

#2

It may be difficult with a month view. Although you can try a Timeline view, it is quite flexible docs.dhtmlx.com/scheduler/snippet/a526fe86

docs.dhtmlx.com/scheduler/api__s … eview.html

#3

I think this should work, thanks.

#4

Can you take a look at this:

[code]scheduler.config.xml_date = “%Y-%m-%d %h:%i”;

	scheduler.createTimelineView({
		name: "month_week_timeline",
		x_unit: "day",
		x_date: "%D %j",
		x_step: 1,
		x_size: 7,
		render: "bar",

		//important!
		round_position: true,
		y_property: "$fake_section",
		dx: 0,
		y_unit: [{key: 0, label: ""}]
	});

	scheduler.config.full_day = true;
	scheduler.config.server_utc = true;
	//		scheduler.config.readonly = true;
	scheduler.config.dblclick_create = false;
	scheduler.config.drag_resize = false;


	scheduler.config.mark_now = true;
	scheduler.config.scroll_hour = new Date().getHours();
	scheduler.config.show_loading = true;
	scheduler.setLoadMode("month");

	scheduler.config.hour_date = "%g:%i %a";
	scheduler.config.day_date = "%M %j, %Y";
	scheduler.config.default_date = "%M %j, %Y";

	scheduler.xy.scale_height = 30;


	scheduler.init('my_calendar', new Date(), "month_week_timeline");
	scheduler.load("calendar/_my_calendar.php");[/code]

I’m using very similar code for a month calendar… On the month_week_timeline calendar however, it doesn’t show any data. When I switch it back to using month, it shows data just fine. Any ideas?

#5

Hi,
make sure you adding show_unassigned:true config to the timeline (as it done in snippet from my post)

#6

I have tested it with that in and out and get the same result.

#7

It seems working ok with our data docs.dhtmlx.com/scheduler/snippet/71ddc0cf
Please provide a demo which demonstrates the issue

#8

I’m not sure how I can give you a working exactly since I’m using load with the schedulerConnector. I am using the same schedulerConnector for a full month scheduler and it works fine.

This is what my XML looks like :

<?xml version='1.0' encoding='utf-8' ?> <data> <event id='55774' > <start_date><![CDATA[2015-06-05 19:00:00]]></start_date> <end_date><![CDATA[2015-06-05 20:30:00]]></end_date> <text><![CDATA[test]]></text> <description><![CDATA[]]></description> <project_id><![CDATA[30736]]></project_id> <real_id><![CDATA[55774]]></real_id> </event> </data>

Here is my full calendar code:

<style>
	/* important */
	.dhx_scheduler_month_week_timeline .dhx_matrix_scell{
		display:none;
	}
	.dhx_cal_today_button {
		right: auto;
	}
</style>
<div id="my_calendar_<?=$microtime?>" class="dhx_cal_container" style="width:100%; height:300px;">
	<div class="dhx_cal_navline">
		<div class="dhx_cal_prev_button">&nbsp;</div>
		<div class="dhx_cal_next_button">&nbsp;</div>
		<div class="dhx_cal_today_button"></div>
		<div class="dhx_cal_date"></div>
	</div>
	<div class="dhx_cal_header">
	</div>
	<div class="dhx_cal_data">
	</div>
</div>
<script>
	$(function() {
		scheduler.config.xml_date = "%Y-%m-%d %h:%i";

		scheduler.createTimelineView({
			name: "month_week_timeline",
			x_unit: "day",
			x_date: "%D %j",
			x_step: 1,
			x_size: 7,
			render: "bar",

			//important!
			round_position: true,
			y_property: "$fake_section",
			dx: 0,
			y_unit: [{key: 0, label: ""}],
			show_unassigned:true
		});

		scheduler.config.full_day = true;
		scheduler.config.server_utc = true;
		//		scheduler.config.readonly = true;
		scheduler.config.dblclick_create = false;
		scheduler.config.drag_resize = false;


		scheduler.config.mark_now = true;
		scheduler.config.scroll_hour = new Date().getHours();
		scheduler.config.show_loading = true;
		scheduler.setLoadMode("month");

		scheduler.config.hour_date = "%g:%i %a";
		scheduler.config.day_date = "%M %j, %Y";
		scheduler.config.default_date = "%M %j, %Y";

		scheduler.xy.scale_height = 30;


		scheduler.init('my_calendar_<?=$microtime?>', new Date(), "month_week_timeline");
		scheduler.load("calendar/_my_calendar.php");
	});
</script>
#9

I realize that the documentation says createTimelineView is only available in PRO edition. What will it do if I’m not using the PRO edition?

#10

I think you know the answer :slight_smile: