DayPilot Calendar create event

Question

I am attempting to implement Daypilot lite calendar. So far it is going ok-ish however I seem to have hit a bit of a bump.

I am trying to create a new event in the calander but I cant seem to pass any info other than the start and end of the event to the daypilot modal.

JavaScript runtime error: 'team' is undefined

The above line is the error I am getting. the control code in 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"
             />

My JavaScript code to send the data to the modal:

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);
    }

I need to be able to pass more than just the start and finish to the modal. As I mentioned I'm not really sure what's going on here so any guidance that could be offered would be appreciated.

score 0 · Accepted Answer · answered May 08 '17 at 10:54

I figured out what I was doing wrong so I thought I'd share it with SO in case anyone else has the same trouble.

Below is my updated JavaScript code. Basically my issue was related to where I had declared the variables used to store the data to pass to the modal. I had placed them inside the function when they needed to be declared outside the scope of the function. Silly mistake but easy to make.

 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 helps someone in the future. Might even be me, you never know!

DayPilot Calendar create event

1 Answers1