dhtmlxscheduler usage with ASP.NET MVC5

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>
<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;
	scheduler.init("scheduler_here", new Date(), "month");
		<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 class="dhx_cal_header"></div>
			<div class="dhx_cal_data"></div>

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:)

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

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



Thanks, it now renders as expected.

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”?

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:

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.