Scheduler not rendering properly

Scheduler ASP.NET MVC
#1

Hello,

scheduler-net.com/docs/faq.html
I followed that to solve my problem, but it’s still not working.

Here my code : [code]@ViewBag.Title;

Calendar 
<link href="~/Content/dhtmlxScheduler/dhtmlxscheduler-responsive.css" rel="stylesheet" type="text/css">
<link href="~/Content/Calendar.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/dhtmlxScheduler/dhtmlxscheduler.js" type="text/javascript"></script>
<script src="~/Scripts/dhtmlxScheduler/dhtmlxscheduler-responsive.js" type="text/javascript"></script>

<style type="text/css" media="screen">
    html, body {
        margin: 0px;
        padding: 0px;
        height: 100%;
        overflow: hidden;
    }
</style>

<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%; padding:0px; margin:0px'>
    <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" name="day_tab" style="right:204px;"></div>
        <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
        <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
    </div>
    <div class="dhx_cal_header"></div>
    <div class="dhx_cal_data"></div>
    @Html.Raw(Model.Render())

</div>

<!-----------------------------------------------------------Scripts------------------------------------------------------------------------------>
<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/dhtmlxScheduler/CodeBase_Calendar/CodeBase_Calendar.js"></script>
<script src="~/Scripts/dhtmlxScheduler/ext/dhtmlxscheduler_editors.js" type="text/javascript" charset="utf-8"></script>
<script src="~/Scripts/dhtmlxScheduler/ext/dhtmlxscheduler_collision.js" type="text/javascript" charset="utf-8"></script>
<script src="~/Scripts/dhtmlxScheduler/ext/dhtmlxscheduler_key_nav.js" type="text/javascript" charset="utf-8"></script>
<script src="~/Scripts/dhtmlxScheduler/ext/dhtmlxscheduler_active_links.js" type="text/javascript" charset="utf-8"></script>
<script src="~/Scripts/dhtmlxScheduler/ext/dhtmlxscheduler_expand.js" type="text/javascript" charset="utf-8"></script>
<script src="~/Scripts/dhtmlxScheduler/ext/dhtmlxscheduler_tooltip.js" type="text/javascript" charset="utf-8"></script>
<script src="~/Scripts/dhtmlxScheduler/ext/dhtmlxscheduler_recurring.js" type="text/javascript" charset="utf-8"></script>
<script src="~/Scripts/dhtmlxScheduler/ext/dhtmlxscheduler_minical.js" type="text/javascript" charset="utf-8"></script>
<script src="~/Scripts/dhtmlxScheduler/locale/recurring/locale_recurring_en.js" type="text/javascript"></script>
<script src="~/Scripts/dhtmlxScheduler/locale/recurring/locale_recurring_fr.js" type="text/javascript"></script>
<!------------------------------------------------------------------------------------------------------------------------------------------------->
[/code]

You can see there the result : prntscr.com/fb68tt
I would like have my scheduler in full-screen.
How can I solve that ?

Many thanks

#2

Hi,

I changed my code but I have still the same problem : prntscr.com/fbh9c5

[code]<!doctype html>

Calendar html, body { margin: 0px; padding: 0px; height: 100%; overflow: hidden; } 
<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" name="day_tab" style="right:204px;"></div>
        <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
        <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
    </div>
    <div class="dhx_cal_header">
    </div>
    <div class="dhx_cal_data">
    </div>
</div>
<!-----------------------------------------------------------Scripts------------------------------------------------------------------------------>
<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/dhtmlxScheduler/CodeBase_Calendar/CodeBase_Calendar.js" type="text/javascript" charset="utf-8"></script>
<script src="~/Scripts/dhtmlxScheduler/dhtmlxscheduler-responsive.js" type="text/javascript"></script>
<script src="~/Scripts/dhtmlxScheduler/ext/dhtmlxscheduler_editors.js" type="text/javascript" charset="utf-8"></script>
<script src="~/Scripts/dhtmlxScheduler/ext/dhtmlxscheduler_collision.js" type="text/javascript" charset="utf-8"></script>
<script src="~/Scripts/dhtmlxScheduler/ext/dhtmlxscheduler_key_nav.js" type="text/javascript" charset="utf-8"></script>
<script src="~/Scripts/dhtmlxScheduler/ext/dhtmlxscheduler_active_links.js" type="text/javascript" charset="utf-8"></script>
<script src="~/Scripts/dhtmlxScheduler/ext/dhtmlxscheduler_expand.js" type="text/javascript" charset="utf-8"></script>
<script src="~/Scripts/dhtmlxScheduler/ext/dhtmlxscheduler_tooltip.js" type="text/javascript" charset="utf-8"></script>
<script src="~/Scripts/dhtmlxScheduler/ext/dhtmlxscheduler_recurring.js" type="text/javascript" charset="utf-8"></script>
<script src="~/Scripts/dhtmlxScheduler/ext/dhtmlxscheduler_minical.js" type="text/javascript" charset="utf-8"></script>
<script src="~/Scripts/dhtmlxScheduler/locale/recurring/locale_recurring_en.js" type="text/javascript"></script>
<script src="~/Scripts/dhtmlxScheduler/locale/recurring/locale_recurring_fr.js" type="text/javascript"></script>
<!------------------------------------------------------------------------------------------------------------------------------------------------->
[/code]

I followed much documentation, I don’t know why I got this.

Furthermore, when I add this in my Calendar Controller :

[code] public class CalendarController : Controller
{

    // GET: Calendar
    public ActionResult Index()
    {
      
        var scheduler = new DHXScheduler(this);
        scheduler.Height = 900;[/code]

and this @Html.Raw(Model.Render()) <!doctype html>

My Calendar appear, but not as I want : prntscr.com/fbhbim

I would like to have my calendar in full-screen like this sample : docs.dhtmlx.com/scheduler/sampl … _init.html

EDIT : I forgot to add my css style, but I have still the same problem : prntscr.com/fbhhf9

Many thanks,
Dargie

#3

Finally, I solved a part of my problem, but I would like to remove this blank under my calendar. I used “height 100%”
My code : [code]<!doctype html>

Calendar html, body { width: 100%; margin: 0px; padding: 0px; height: 100%; overflow: visible; } 
<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" name="day_tab" style="right:204px;"></div>
        <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
        <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
    </div>
    <div class="dhx_cal_header">
    </div>
    <div class="dhx_cal_data">
    </div>
</div>
[/code]

prntscr.com/fda04j