dhtmlxscheduler usage with ASP.NET MVC5

Scheduler Javascript
#1

I am trying to use dhtmlxscheduler within an ASP.NET MVC 5 application by following the guide available at docs.dhtmlx.com/scheduler/how_to_start.html but not having much joy. I have added v4.1.1 scripts and css to my project via NuGet.

I have created a new project and created a new view without layout, the controller action simply serves the view. Below is the HTML in my view but the page renders totally blank, what am I doing wrong? Also, how would I get this to work with a view that uses a layout?

I am aware there is a dhtmlxscheduler .NET version available but this requires a license.

@{
	Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>How to start</title>
<script src="@Url.Content("~/Scripts/dhtmlxscheduler/dhtmlxscheduler.js")" type="text/javascript"></script>
<link rel="stylesheet" href="@Url.Content("~/Content/dhtmlxscheduler/dhtmlxscheduler.css")" type="text/css">
<style type="text/css" media="screen">
	html, body {
		margin: 0px;
		padding: 0px;
		height: 100%;
		overflow: hidden;
	}
</style>
<script>
	scheduler.init("scheduler_here", new Date(), "month");
</script>
</head>
<body>
	<div>
		<div id="scheduler_here" class="dhx_cal_container" style="width:100%; height:100%;">
			<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 class="dhx_cal_tab" id="day_tab" style="right:204px;"></div>
				<div class="dhx_cal_tab" id="week_tab" style="right:140px;"></div>
				<div class="dhx_cal_tab" id="month_tab" style="right:76px;"></div>
			</div>
			<div class="dhx_cal_header"></div>
			<div class="dhx_cal_data"></div>
		</div>
	</div>
</body>
</html>
#2

Hi,
in your markup call of scheduler.init is done before the container of the scheduler (div #scheduler_here) is loaded.
You should either put scheduler.init script to the bottom of the page, or call it on page load

dhtmlxScheduler also requires a license, only the GPL version is free:)

#3

Thanks for the reply. I have moved the to the bottom of my but nothing gets rendered?

#4

Please check the first item
docs.dhtmlx.com/scheduler/faq.ht … dcorrectly

You specify the sizes for html and body, and #scheduler_here element has 100% sizes as well.
But the scheduler is nested in the another div which has no sizes specified and appears to be collapsed, this makes the scheduler not visible

[code]

[/code]
#5

Ah!
Thanks, it now renders as expected.

#6

I thought that css uses inheritance to determine the height so if is 100% then the

should be 100% as well?
How can you tell that the div “appears to be collapsed”?
#7

Bit of digging shows that the scheduler rendering creates a div called #izquierda which surrounds the scheduler. The style.css contains #izquierda{ float:left; overflow: auto;}

If you change it to #izquierda{ width: 100%; height: 100%; } then it starts to look better.

Don’t know why it’s there or what effect this change will have, I guess it will blow up later and tell me :wink:

#8

Can’t edit my last post to say that izquierda was my code not schedular’s code. However I think I have answered how the div “appears to be collapsed” in case anyone else doesn’t understand the css side of things.