locked
JSOM not updating calendar data RRS feed

  • Question

  • Hi, I have a calendar and a dropdown. When I change the value of the dropdown it gets correctly its value and changes the camlQuery but the calendar doenst update it's values. In the example below I chose the category "Accompagnement" but I still see "categorie 2" in the calendar. Any help pls? Thanks

    CODE

    <link href="/sites/TEST1/Documents%20partages/JS/Calendar/fullcalendar.css" rel="stylesheet" />
    <link href="/sites/TEST1/Documents%20partages/JS/Calendar/fullcalendar.print.css" rel="stylesheet" media="print" />
    <script src="/sites/TEST1/Documents%20partages/JS/Calendar/moment.min.js"></script>
    <script src="/sites/TEST1/Documents%20partages/JS/Calendar/jquery.min.js"></script>
    <script src="/sites/TEST1/Documents%20partages/JS/Calendar/fullcalendar.min.js"></script>
    
    <script>
        function loadAllData() {
            loadCategories();
            loadCalendar();
        }
    
        function loadCalendar(ddlValue) {
            var calListProperties = new Object;
            calListProperties.listName = "Plannings_Exploitation";
            retrieveListItemsInclude(calListProperties,ddlValue);
        }
    
        function loadCategories() {
            var catListProperties = new Object;
            catListProperties.listName = "ref_categories";
            retrieveListItemsInclude(catListProperties);
        }
        
        function retrieveListItemsInclude(listProperties,ddlValue) {
            //var ddlValue = $('#ddlCategoriesID').value;
            var clientContext = new SP.ClientContext.get_current();
            var oList = clientContext.get_web().get_lists().getByTitle(listProperties.listName);
            var camlQuery = new SP.CamlQuery();
            var ddlCategories = document.getElementById("ddlCategoriesID");
            var today = new Date();
            var ss = today.getSeconds();
            if(listProperties.listName != "Plannings_Exploitation" || !ddlValue)
                camlQuery.set_viewXml("<View><Query><OrderBy><FieldRef Name='Title' Ascending='TRUE' /></OrderBy></Query></View>");
            else
                camlQuery.set_viewXml("<View><Query><Where><Eq><FieldRef Name='evn_categorie'/><Value Type='Lookup'>"+ddlValue+"</Value></Eq></Where><OrderBy><FieldRef Name='Title' Ascending='TRUE'/></OrderBy></Query></View>");
    
            listProperties.colListItem = oList.getItems(camlQuery);
    
            switch(listProperties.listName) {
                case 'Plannings_Exploitation':
                    clientContext.load(listProperties.colListItem, 'Include(Title,ID,evn_categorie,evn_sscategorie,evn_datedebut,evn_datefin)');
                    clientContext.executeQueryAsync(function(){ onCalQuerySucceeded(listProperties); }, onFailedCallback);
                    break;
                case 'ref_categories':
                    clientContext.load(listProperties.colListItem, 'Include(Title,ID)');
                    clientContext.executeQueryAsync(function(){ onCatQuerySucceeded(listProperties); }, onFailedCallback);
                    break;
            }
        }
    
        function onCalQuerySucceeded(listProperties) {
            var listItemEnumerator = listProperties.colListItem.getEnumerator();
    
            //Formulate HTML from the list items
            var dataEvents = [];
            //Loop through all the items
            while (listItemEnumerator.moveNext()) {
                var listItem = listItemEnumerator.get_current();
                var strtitle = listItem.get_item("Title");
                var strid = listItem.get_item("ID");
                var strcategorie = listItem.get_item("evn_categorie").$4g_1;
                var strsscategorie = listItem.get_item("evn_sscategorie").$4g_1;
                var strtitle = listItem.get_item("evn_categorie").$4g_1 + " / " + listItem.get_item("evn_sscategorie").$4g_1;
                var strdatedebut = listItem.get_item("evn_datedebut");
                var strdatefin = listItem.get_item("evn_datefin");
                strdatedebut = strdatedebut.getFullYear() + "-" + ('0' + (strdatedebut.getMonth() + 1)).slice(-2) + "-" + ('0' + strdatedebut.getDate()).slice(-2) + "T" + ('0' + strdatedebut.getHours()).slice(-2) + ":" + ('0' + strdatedebut.getMinutes()).slice(-2) + ":" + ('0' + strdatedebut.getSeconds()).slice(-2);
                strdatefin = strdatefin.getFullYear() + "-" + ('0' + (strdatefin.getMonth() + 1)).slice(-2) + "-" + ('0' + strdatefin.getDate()).slice(-2) + "T" + ('0' + strdatefin.getHours()).slice(-2) + ":" + ('0' + strdatefin.getMinutes()).slice(-2) + ":" + ('0' + strdatefin.getSeconds()).slice(-2);
                dataEvents.push({ title: strtitle, start: strdatedebut, end: strdatefin });
            }
    
            var today = new Date();
            var dd = today.getDate();
            var mm = today.getMonth() + 1;
            var yyyy = today.getFullYear();
            var jour = ('0' + dd).slice(-2);
            var mois = ('0' + mm).slice(-2);
    
            $('#calendar').fullCalendar({
                defaultDate: yyyy + "-" + mois + "-" + jour,
                editable: false,
                eventLimit: true, // allow "more" link when too many events
                events: dataEvents
            });
        }
    
        function onCatQuerySucceeded(listProperties) {
            var cats = [];
            var listItemEnumerator = listProperties.colListItem.getEnumerator();
            var ddlCategories = document.getElementById("ddlCategoriesID");
            ddlCategories.options.length = 0;
            ddlCategories.options[ddlCategories.options.length] = new Option("Categories", "Categories");
    
            while (listItemEnumerator.moveNext()) {
                var oListItem = listItemEnumerator.get_current();
    
                var cat = {};
    
                cat.id = oListItem.get_item('ID');
                cat.title = oListItem.get_item('Title');
                ddlCategories.options[ddlCategories.options.length] = new Option(cat.title, cat.title);
            }
        }
    
        //This function fires when the query fails
        function onFailedCallback(sender, args) {
            //Formulate HTML to display details of the error
            var markup = '<p>The request failed: <br>';
            markup += 'Message: ' + args.get_message() + '<br>';
            //Display the details
            alert(markup);
        }
    
        ExecuteOrDelayUntilScriptLoaded(loadAllData, "sp.js");
    </script>
    
    <style>
        #calendar {
            max-width: 900px;
            margin: 0 auto;
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }
    </style>
    <select id="ddlCategoriesID" onchange="loadCalendar(this.value)"></select>
    <div id='calendar'></div>

    Friday, August 12, 2016 3:13 PM

Answers

  • Hi renatois,

    SharePoint OOTB calendar not supported multiple value URL filter dynamically.

    As a workaround, we can filter Calendar with Jquery.

    Here is a similiar thread for your reference:

    Dynamic filter in calendar view

    Thanks

    Best Regards


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    Friday, August 19, 2016 9:56 AM

All replies

  • Hi,

    can you please check if the below helps you

    https://social.technet.microsoft.com/Forums/office/en-US/d390218c-835e-4f71-8066-59316c9d5332/jsom-to-update-calendar-object-expected?forum=sharepointdevelopment


    Please remember to click Mark as Answer on the answer if it helps you

    Friday, August 12, 2016 5:54 PM
  • Hi renatois,

    If you want to filter the calendar data with the value in dropdown list, I suggest you can create a new calendar view with CAML Query and then use JavaScript to redirect to the new Calendar view page to display the expected data.

    Here is a code snippet about creating Calendar view for your reference:

    function createCalendarView() {
    
    			var currentcontext = new SP.ClientContext.get_current();
    			var hostcontext = new SP.AppContextSite(currentcontext, hostweburl);
    			var hostweb = hostcontext.get_web();
    			var listCollection = hostweb.get_lists();
    			var list = listCollection.getByTitle('Calendar');
    
    			// Create  View
    			//get the view collection to add the view
    			var viewcollection = list.get_views();
    			//create a viewinfo with the view properties
    			var viewInfo = new SP.ViewCreationInformation(); 			viewInfo.set_title("MYVIEW"); //set the title
    			viewInfo.set_viewTypeKind(524288);
    			viewInfo.set_setAsDefaultView(true); //set the view to default
    			var camlQuery = new SP.CamlQuery();
    			camlQuery.set_viewXml("<View><Query><Where><Eq><FieldRef Name='Approval_x0020_Status'/><Value Type='Choice'>Approved</Value></Eq></Where></Query></View>");
    			viewInfo.set_query(camlQuery);
    			//add the view to the view collection
    			viewcollection.add(viewInfo);
    
    
    			//load the view collection
    			context.load(viewcollection);
    			context.executeQueryAsync(onCalendarViewCreationSuccess, onCalendarViewCreationFail);
    		}
    
    		function onCalendarViewCreationSuccess() {
    			alert('Calendar View created successfully!');
    		}
    
    		function onCalendarViewCreationFail(sender, args) {
    			alert('Failed to create the Calendar View. ' + args.get_message());
    		}

    More information about redirecting page using JavaScript:

    How to redirect to another page in jQuery?

    Thanks

    Best Regards


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    Monday, August 15, 2016 9:00 AM
  • Hi Jerry, thanks for your post. Is it possible to make that change asynchronously or at least without creating new pages for each view? The problem is that I have to many dropdowns in the real scenario and would be awkward to create new pages to each view if I got it right.

    Thanks,

    Renato

    Wednesday, August 17, 2016 8:05 AM
  • Hi renatois,

    SharePoint OOTB calendar not supported multiple value URL filter dynamically.

    As a workaround, we can filter Calendar with Jquery.

    Here is a similiar thread for your reference:

    Dynamic filter in calendar view

    Thanks

    Best Regards


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    Friday, August 19, 2016 9:56 AM