Utilizing dhtmlxScheduler in ASP.NET MVC5 Development

I have been attempting to integrate dhtmlxscheduler into an ASP.NET MVC 5 application by following the instructions provided at but I am encountering difficulties. I have installed version 4.1.1 scripts and css using NuGet in my project.

I set up a new project and created a view without a layout, with the controller action serving the view. Despite including the HTML code in my view, the page is rendering completely blank. Can someone help me identify what I might be doing incorrectly? Additionally, how can I make this work with a view that has a layout?

I understand there is a licensed dhtmlxscheduler .NET version available as well.

@{
    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>

Answer №1

After some investigation, I found that the solution to my issue was actually mentioned in the FAQ section. You can check it out here:

The problem stemmed from the fact that the height of my containing div was not properly set.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to compare two arrays that have elements of different data types?

Can someone help me compare two arrays in TypeScript to see if they are identical? I'm having trouble with the current code. Here's what I have: let props:(string|boolean)[]=['abc','def',true,false,'xyz'] let propsCo ...

Improving basic collision detection using velocity-based 2D motion

Check out this CodePen demo where you can control the movement of the "player" square using arrow keys. You can also place a light by pressing the spacebar and the player is supposed to be prevented from crossing over the blue lines by getting pushed in ...

Presenting information extracted from the Meteor 1.0 framework

At the beginning of my Meteor application, I import data from a JSON file using the following code: 13 if (Meteor.isServer) { 14 15 //startup 16 Meteor.startup(function () { 17 if(Plugins.find().count() === 0) { 18 var plugins_data = J ...

Looping through a jQuery/js script, adding a unique variable with varying ending numbers to individual div elements

Imagine having an array of variables like so: example1 = 1 example2 = 32 example3 = 3345 and so forth up to something large, for instance example100 = 222 The goal is to insert each number into a separate div, with each div identified by: <div class ...

The field must contain a value. Please ensure a valid input

I am looking to set up a database using code-first approach in ASP.NET Core 3.0 Below is the snippet of code for the DbContext: public class TrelloContext : DbContext { public TrelloContext(DbContextOptions options) : base(options) { } p ...

Refresh client web pages with JSON data without using eval

I am currently working as a consultant on a web application that functions as a single page app. The main purpose of the app is to constantly fetch new json data in the background (approximately every minute) and then display it on the screen. Our clients ...

Tips for extracting the team member field value, which is a classification in Sitefinity 12 web services, through the use of OData and JavaScript

Utilizing ajax to retrieve data from web services in sitefinity, I have been able to successfully retrieve team member information using this specific apiURL: localhost/api/lawyerswebservice/teammembers?$expand=RelatedTeam,PrimaryImage; However, I have e ...

Resolve Redux-Firestore issue #45: Possible Solutions?

I'm facing an issue where deleting a document from Firestore results in my Redux store showing it as null instead of removing it. Even though the document is deleted in Firestore, this inconsistency causes frontend issues because my .map functions can ...

Updating input value using React state

Hey there, I'm currently using a color picker to update my this.state.colorPicked value, which is working well. Now, I want to create a function that will concatenate the state's colorPicked value with the input field when called. If the input fi ...

The for loop is not pausing to wait for the callback to complete within the loop

My objective is to display multiple .stl files in various divs on a webpage and retrieve model information for each model (such as volume, area, xyz coordinates, etc.). To accomplish this, I am utilizing , which is built on three.js The HTML code snippet: ...

Disable default behavior in a SharePoint 2010 List new form with jQuery if conditions are not met

In the SharePoint 2010 List new form, there are 10 checkboxes available. I specifically need to choose exactly 3 of them and not less than that. Even though I implemented jquery for this purpose, it seems that the form does not stop submitting when the con ...

Converting Angular object into an array: A step-by-step guide

In Angular, I have retrieved an object that contains the following information: quiz.js:129 m {$promise: Promise, $resolved: false} 439: "https://mysite.no/sites/default/files/styles/quiz_large/public/fields/question-image/istock_000059790188_large.jpg ...

Website errors appear on the hosted page in <body> section without being present in the code

Hello there, I have set up a debug website using my "Olimex ESP-32 POE" to send internal data via JSON, eliminating the need for Serial Output from the Arduino IDE (the reasons behind this are not relevant). #include "Arduino.h" #include <WiF ...

Discovering the specific object ID that triggered an event in JavaScript

I am developing a webpage that includes JavaScript functionality. There is a specific function in the Javascript code which gets triggered by two different elements when clicked: 1. When a checkbox is clicked: $('#chkShowAll').click( functi ...

Is there a way in vee-validate to validate specific sections of a form?

I'm struggling with my English skills. When I utilize 'this.$validator.validate()', I am seeking a way to only validate specific inputs on the page. Is there a method to achieve this? ...

Turn off the following navigation link in the Bootstrap wizard

I am working on a bootstrap wizard and I need to find a way to disable the next navigation link under certain conditions. Does anyone have suggestions on how I can achieve this using jQuery, CSS, or any other method? <div id="rootwizard"> ...

Navigation buttons that move the user either up or down the page

I am a beginner in programming and I wanted to create two buttons for my webpage. One button should appear when the page is scrolled more than 300px and take the user to the top, while the other button should be displayed immediately and scroll the user to ...

Exploring the power of NativeScript and Angular 2's HTTP service

I am currently learning about native apps using JavaScript technologies and I am attempting to create a simple application utilizing the Pokemon API. Progress So Far I have developed a basic component that shows a list of pokemons retrieved from an HTTP ...

Properly executing a for loop

I have devised a method to transform Swagger 1 documentation into Swagger 2. This involves utilizing an array of resources as input for the conversion process. However, I have encountered an issue where the code seems to be skipping ahead and jumping to ...

Challenges with hover effects in Vue JS

When hovering over one of two images, a specific component is displayed. Hovering over the first image reveals a component with a red background, while hovering over the second image reveals a component with a yellow background. My actual code differs gre ...