locked
How show events in calendar using FullCalendar RRS feed

  • Question

  • Hi everybody.

    I'm working a application using lightswitch html.
    My app has a table with events, it has columns of datetime, status and comments.

    I need show the events in calendar.
    I found in internet the FullCalendar, but I don't have idea of how work with lightswitch html and FullCalendar

    How do I populate the data in the calendar?
    If someone know other free calendar control, share with me, please.

    Estudando Windows Phone, Windows 8 e LightSwitch, muito bom!!!

    Tuesday, July 29, 2014 3:16 PM

Answers

  • Hi LBT,

    Recently I dealt with this, and found that the custom control's (CC) container is created every time the navigation button is clicked. When navigating from the page with the CC to the start page the contents of the CC screen will be hidden so clicking a navigation button again will create a new container with same id as the previous one. Now the page will have two containers one with the Calendar (Chart, or whatever, hidden) and an empty container. CC will be drawn to the hidden container because it was added first. As a workaround solution, you can remove the existing container before adding a new one, using JQuery:

    //Remove existing Chart container from page
    
        var ChartContainer = document.getElementById(“Chart2″);
    
        if (ChartContainer)
    
            $(“div#Chart2″).remove();
    

    Also, you can refer to this blog for another workaround.

    Hope this helps.


    Nicolás Lope de Barrios
    If you found this post helpful, please "Vote as Helpful". If it actually answered your question, please remember to "Mark as Answer". This will help other people find answers to their problems more quickly.

    Monday, August 11, 2014 8:09 PM
  • Thanks, Nicolas---very helpful.  These were both reasonable simple work-arounds for this type of bug.

    I saw good results with either:

    myapp.CustomCalendar.Calendars_render = function (element, contentItem) {
         //Write code here.
        var calendarDiv = $('#calendar');
    
        if (calendarDiv) {
            calendarDiv.remove();
        }
    
        element.innerHTML = "<div data-role='none' id='calendar'></div>";
    
    // etc...

    Or with:

        contentItem.screen.getCalendars().then(function(calendars) {
            $('#calendar', element).fullCalendar({
                events: calendars.data,
    // etc..

    Tuesday, August 12, 2014 2:13 AM
  • Just for fun I tried using this JavaScript calendar.  Despite being completely free, it's actually pretty powerful and full featured.  It's also pretty simple to integrate into LightSwitch.

    myapp.CustomCalendar.Calendars_render = function (element, contentItem) {
        // Write code here.
        element.innerHTML = "<div id='calendar'></div>";
    
        contentItem.screen.getCalendars().then(function(calendars) {
            $('#calendar').fullCalendar({
                events: calendars.data,
                eventDataTransform: function(rawEventData) {
                    return {
                        id: rawEventData.Id,
                        title: rawEventData.Title,
                        start: rawEventData.StartTime,
                        end: rawEventData.EndTime
                    };
                }
     
            });
        });
    
    
    };
    

    • Marked as answer by Angie Xu Friday, August 8, 2014 2:14 AM
    Tuesday, August 5, 2014 12:14 AM
  • This is a particularly nasty bug that is being described on these forums recently.  It seems that custom controls disappear after a user navigates away from a screen and then navigates back.  I think it started after LightSwitch was updated to either v2.0 or 2.5 and may have something to do with the new breadcrumb and routing protocols it now uses.

    I hope there is a solution on these forums and if not, the LightSwitch team really should correct it since it makes custom controls almost unusable.

    Monday, August 11, 2014 6:08 AM

All replies

  • Just for fun I tried using this JavaScript calendar.  Despite being completely free, it's actually pretty powerful and full featured.  It's also pretty simple to integrate into LightSwitch.

    myapp.CustomCalendar.Calendars_render = function (element, contentItem) {
        // Write code here.
        element.innerHTML = "<div id='calendar'></div>";
    
        contentItem.screen.getCalendars().then(function(calendars) {
            $('#calendar').fullCalendar({
                events: calendars.data,
                eventDataTransform: function(rawEventData) {
                    return {
                        id: rawEventData.Id,
                        title: rawEventData.Title,
                        start: rawEventData.StartTime,
                        end: rawEventData.EndTime
                    };
                }
     
            });
        });
    
    
    };
    

    • Marked as answer by Angie Xu Friday, August 8, 2014 2:14 AM
    Tuesday, August 5, 2014 12:14 AM
  • It is ok for me, I used this code and I can see the fullcalendar in my app.

    But when I change of screen using top menu (picture) and I return to calendar screen, I can't see fullcalendar, the screen is blank page.

    What I need do?


    Estudando Windows Phone, Windows 8 e LightSwitch, muito bom!!!

    Saturday, August 9, 2014 11:14 PM
  • This is a particularly nasty bug that is being described on these forums recently.  It seems that custom controls disappear after a user navigates away from a screen and then navigates back.  I think it started after LightSwitch was updated to either v2.0 or 2.5 and may have something to do with the new breadcrumb and routing protocols it now uses.

    I hope there is a solution on these forums and if not, the LightSwitch team really should correct it since it makes custom controls almost unusable.

    Monday, August 11, 2014 6:08 AM
  • Can you upload an example project how this is done?

    Thanks


    Eric

    Monday, August 11, 2014 9:26 AM
  • Hi LBT,

    Recently I dealt with this, and found that the custom control's (CC) container is created every time the navigation button is clicked. When navigating from the page with the CC to the start page the contents of the CC screen will be hidden so clicking a navigation button again will create a new container with same id as the previous one. Now the page will have two containers one with the Calendar (Chart, or whatever, hidden) and an empty container. CC will be drawn to the hidden container because it was added first. As a workaround solution, you can remove the existing container before adding a new one, using JQuery:

    //Remove existing Chart container from page
    
        var ChartContainer = document.getElementById(“Chart2″);
    
        if (ChartContainer)
    
            $(“div#Chart2″).remove();
    

    Also, you can refer to this blog for another workaround.

    Hope this helps.


    Nicolás Lope de Barrios
    If you found this post helpful, please "Vote as Helpful". If it actually answered your question, please remember to "Mark as Answer". This will help other people find answers to their problems more quickly.

    Monday, August 11, 2014 8:09 PM
  • I used this code and removed control. 

    It is ok now, thank


    Estudando Windows Phone, Windows 8 e LightSwitch, muito bom!!!

    Monday, August 11, 2014 11:40 PM
  • Thanks, Nicolas---very helpful.  These were both reasonable simple work-arounds for this type of bug.

    I saw good results with either:

    myapp.CustomCalendar.Calendars_render = function (element, contentItem) {
         //Write code here.
        var calendarDiv = $('#calendar');
    
        if (calendarDiv) {
            calendarDiv.remove();
        }
    
        element.innerHTML = "<div data-role='none' id='calendar'></div>";
    
    // etc...

    Or with:

        contentItem.screen.getCalendars().then(function(calendars) {
            $('#calendar', element).fullCalendar({
                events: calendars.data,
    // etc..

    Tuesday, August 12, 2014 2:13 AM
  • What do you need example?

    Estudando Windows Phone, Windows 8 e LightSwitch, muito bom!!!

    Tuesday, August 12, 2014 8:26 PM