Creating events in DayPilot Calendar

Currently, I am in the process of integrating Daypilot lite calendar into my project. Progress has been decent so far, but I have encountered a small obstacle.

The issue arises when attempting to create a new event on the calendar - I am unable to pass any information other than the start and end times to the daypilot modal.

While working on this, I encountered a JavaScript runtime error: 'team' is undefined.

The snippet above highlights the error message that is causing trouble for me. Below is the code segment from my aspx page:

<h1>Welcome <asp:Label ID="lblTeam" runat="server"></asp:Label></h1>
        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" AppendDataBoundItems="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
            <asp:ListItem Selected="True" Value="0">Select a pitch</asp:ListItem>
        </asp:DropDownList>
        <DayPilot:DayPilotCalendar 
            ID="DayPilotCalendar1" 
            runat="server" 
            DataStartField="sess_start" 
            ShowEventStartEnd="true" 
            DataEndField="sess_end" 
            DataTextField="team" 
            DataIdField="BookingId"
            ClientObjectName="dpc1" 
            TimeRangeSelectedHandling="JavaScript" 
            TimeRangeSelectedJavaScript="timeRangeSelected(start, end, team, pitch)" 
            OnCommand="DayPilotCalendar1_Command" 
            NonBusinessBackColor="Black" 
            HeightSpec="BusinessHoursNoScroll" 
            BusinessEndsHour="20" 
            OnEventMove="DayPilotCalendar1_EventMove" 
            EventMoveHandling="CallBack"
             />

In order to send data to the modal using JavaScript, here's the code block I used:

function timeRangeSelected(start, end, team, pitch) {
        team = document.getElementById('<%= lblTeam.ClientID %>').innerText;
        var pitchSel = document.getElementById('<%= DropDownList1.ClientID %>');
        pitch = pitchSel.options[pitchSel.selectedIndex].value;
        var modal = new DayPilot.Modal();
        modal.top = 60;
        modal.width = 300;
        modal.opacity = 70;
        modal.border = "10px solid #d0d0d0";
        modal.closed = function () {
            if (this.result == "OK") {
                dpc1.commandCallBack('refresh');
            }
            dpc1.clearSelection();
        };
        modal.showUrl("New.aspx?start=" + start.toStringSortable() + "&end=" + end.toStringSortable() + "&r=" + team + "&pitch=" + pitch);
    }

At this stage, I aim to pass additional information besides just the start and end times to the modal window. Since there seems to be some confusion on my end, any assistance or guidance provided would be highly valued.

Answer №1

After realizing my mistake, I wanted to share the solution in case anyone else encounters the same issue on SO.

Here is the revised version of my JavaScript code. The problem stemmed from where I had initially declared the variables for storing data to pass to the modal. I mistakenly placed them inside the function, when in fact they should have been declared outside the function's scope. It was a simple but crucial oversight.

 var team = document.getElementById('<%= lblTeam.ClientID %>').innerText;
    var pitchSel = document.getElementById('<%= DropDownList1.ClientID %>');
    var pitch = pitchSel.options[pitchSel.selectedIndex].value;

    function timeRangeSelected(start, end, team, pitch) {
        var modal = new DayPilot.Modal();
        modal.top = 60;
        modal.width = 300;
        modal.opacity = 70;
        modal.border = "10px solid #d0d0d0";
        modal.closed = function () {
            if (this.result == "OK") {
                dpc1.commandCallBack('refresh');
            }
            dpc1.clearSelection();
        };
        modal.showUrl("New.aspx?start=" + start.toStringSortable() + "&end=" + end.toStringSortable() + "&r=" + team + "&pitch=" + pitch);
    }

I hope this explanation proves helpful to someone in the future, including myself!

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

I am interested in displaying stars in accordance with an array element that is provided as a parameter to my template

I encountered an issue while trying to iterate over an array element with an ID of {{doctor.16}}. I initially attempted to use if conditions as a workaround, but unfortunately, that also proved unsuccessful. Can someone please provide assistance? Here is ...

Incorporating a text box underneath the model image

My application currently utilizes a grid gallery that perfectly fits my needs. However, there are two specific changes I need to make in order for it to be complete for my purpose. Unfortunately, I am struggling to figure out how to implement these changes ...

Utilizing dependency injection within an Angular 1 TypeScript application

Seeking assistance with integrating angular-jwt with typescript in my angular1 project. The angular-jwt package was installed using the following command: typings install dt~angular-jwt --global The package is located in typings>globals>angular-jwt ...

Using Node.js and JWT: A guide to securely storing and using access tokens in the Authorization header

Has anyone encountered this issue before? I've searched extensively online but haven't found much information on the topic. I'm relatively new to using node and JWTs, and my goal is to generate a JWT and store it in the Authorization header ...

Using JavaScript to create customized checkboxes is a useful way to

I am looking to develop a JavaScript code that saves all the checkboxes selected by a user. When the user clicks on the finish button, the code should display what they have chosen (text within the label). Admittedly, I am unsure of how to proceed and wou ...

Unable to modify the color of UML state elements within JointJS

I need some help with jointjs as I am in the process of adjusting the color of a UML state diagram graph using this command: graph.getElements()[4].attributes.attrs[".uml-state-body"]["fill"] = "#ff0000"; However, despite trying this, the color of the st ...

Is there a way to use ng-click to switch the ng-src of one image with that of another?

*I made updates to the plunkr and code to reflect my localhost version more accurately. It turned out that the AngularJS version was not the issue even after fixing the previous plunkr.* Let me start by saying that I am facing some challenges with Angular ...

Breaking down numerous requests into chunks in JavaScript: A step-by-step guide

I am facing a situation where I have multiple requests to make, but they cannot all be called simultaneously. Therefore, I came up with a solution to split the set of requests into chunks of 10. I'm curious about how I can handle making these 10 reque ...

Determine if the given text matches the name of the individual associated with a specific identification number

Struggling to create a validation system for two sets of fields. There are 6 inputs in total, with 3 designated for entering a name and the other 3 for an ID number. The validation rule is that if an input with name="RE_SignedByID" contains a value, then c ...

Utilize data from two distinct JSON sources that are updated at varying intervals, and display the combined results in an ng-repeat

I am currently working on creating a status list that pulls data from two separate JSON sources. The main purpose of this list is to show general information from the first source, while also indicating a status color based on the number of people in the s ...

The function you are trying to use is not a valid jQuery function

Although I've come across this issue in previous posts, none of the solutions worked for me and it's really frustrating. I'm a newbie to javascript and I'm sure the answer is probably simple. I'm attempting to incorporate the rapt ...

When using a PhoneGap app to access a webservice, are there any potential cross-site issues that could arise?

How can I access an external web service from a PhoneGap app using AJAX without needing to rely on CORS or JSONP to bypass the cross-origin issue? I've come across a question on Stack Overflow suggesting that cross-site HTTP calls are not a problem wi ...

Is it possible to generate a specified number of divs or HTML tags with varying information using ReactJS?

Currently, I am in the process of constructing this website and I have noticed that I have 4 divs that are essentially doing the same thing. However, I find myself copying and pasting these divs 4 times, only making minor changes to 4 bits of information. ...

Transmitting data from Angular to .NET Core for seamless integration

I have been attempting to send an xls or any other file from my angular application to a .NET core controller, but none of my methods seem to work... Below is my component where I call my service upon button click: handleFileInput(file: FileList) { this. ...

Once chosen, zoom in on the map to view the results

I am facing an issue with multiple selects in my code, where one select depends on the result of another. The ultimate goal is to zoom in on the area that has been searched and found, but unfortunately, it is not functioning as expected. If you'd lik ...

Storing a dynamically created grid of inputs using a consistent ng-model

I have the following code snippets: $scope.createPack = function(informationsPack, informationsActivite) { PackService.add(informationsPack, informationsActivite) .then(function(res) { $state.go(&apos ...

Encountering an issue when attempting to save an excel file in Angular 8, receiving an error message that states "

When working with angular 8, I encountered an issue while trying to save an excel file. The error message displayed was as follows: ERROR TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed. at Functi ...

How can I retrieve the Parent repeater id in the code-behind file?

I have implemented a nested repeater in my webpage that looks like this: HTML Markup: <asp:Repeater ID="parentRepeater" runat="server"> <ItemTemplate> <br /> <b><%# DataBin ...

Angular Material's md-checkbox is a required component

I am working on a form that consists of checkboxes representing the days of the week. When the user hits submit without selecting any checkboxes, I want an error message to appear. Here is the HTML code snippet that I have: <form id="addEditForm" nam ...

Using `require` in place of `script` tags in a three.js file when working with Node.js environment

Instead of using the html script tag, I have implemented javascript require in my three.js file for node.js. Here is a snippet from an html file: <script src="../build/three.js"></script> <script src="js/controls/DragControls.js"></s ...