2017-07-05 1 views
0

Ceci est ma première fois d'essayer de mettre en œuvre des fonctionnalités pour un calendrier. Ce que je tente de faire est de prendre des dates à partir d'une liste (avec d'autres informations comme le titre des événements, la description des événements, l'hôte de l'événement, etc.) et de le synchroniser avec le calendrier par défaut de l'utilisateur./calendriers de perspectives. J'essaye d'accomplir ceci avec javascript.Sync dates sans partie Web de calendrier Outlook/Google/Calendriers Desktop

Ce que j'enVision actuellement je reçois les données à l'aide SP Services, que je fais déjà. J'utilise ceci pour construire la "vue de liste" d'un événement en utilisant DataTables, que j'ai déjà travaillé. Maintenant, je voudrais ajouter un bouton sur chaque événement qui dit "Ajouter au calendrier" et quand on clique, il ajoute l'événement au calendrier par défaut (utile pour les calendriers de bureau?) Ou permet à l'utilisateur de choisir un calendrier à ajouter à (entre google/outlook, etc.). En plus de cela, je voudrais avoir un bouton qui choisit un lot d'événements à ajouter à leur calendrier.

Je sais que c'est quelque chose de bien au-delà de ce que je sais actuellement ou JavaScript, mais vous serais reconnaissant pour toute direction. J'ai déjà commencé à lire l'API Google Calendar, mais c'est encore un peu difficile à comprendre. En outre, une autre note, Les utilisateurs sur le SharePoint sont des employés avec un email Outlook par défaut. Je suppose que ce serait le moyen le plus simple d'ajouter des événements, mais je ne sais pas trop comment: A) Obtenir l'accès à leur calendrier uniquement par leur compte d'utilisateur et B) comment autoriser les ajouts au calendrier.

Si c'est tout bénéfique, ceci est mon code actuel à l'aide des services de SP et datatables

$(document).ready(function() { 
     var method = "GetListItems"; 
     var webURL = $().SPServices.SPGetCurrentSite(); 
     var list = "Events List"; 
     var fieldsToRead = "<ViewFields>" + "<FieldRef Name='Name' />" + "</ViewFields>"; 
     var query = "<Query><OrderBy><FieldRef Name='ID' Ascending='True' /></OrderBy></Query>"; 
     var pre = []; 
     var dataSet = []; 
     var i = 0; 
     $().SPServices({ 
      operation: method, 
      async: false, 
      webURL: webURL, 
      listName: list, 
      CAMLViewFields: "<ViewFields Properties='True' />", 
      CAMLQuery: query, 
      completefunc: function(xData, Status) { 
       $(xData.responseXML).SPFilterNode("z:row").each(function() { 

        var pre = []; 
        var title = $(this).attr("ows_Title"); 
        var host = $(this).attr("ows_EventHost"); 
        var bdate = $(this).attr("ows_StartDate"); 
        bdate = dateFromSharepoint(bdate); 
        var edate = $(this).attr("ows_EndDate"); 
        if (edate === null | edate === '') { 
         edate = bdate 
        } else { 
         edate = dateFromSharepoint(edate); 
        } 

        var bdatein = moment(bdate).format('MMMM Do YYYY, h:mm a'); 
        var edatein = moment(edate).format('MMMM Do YYYY, h:mm a'); 
        var category = $(this).attr("ows_Category"); 
        var body = $(this).attr("ows_Body"); 
        var loc = $(this).attr("ows_Location"); 
        var auth = $(this).attr("ows_Author"); 
        var created = $(this).attr("ows_Created"); 
        var modified = $(this).attr("ows_Modified").split(" ")[0]; 
        var ID = $(this).attr("ows_ID"); 
        var sumcomms = Number($(this).attr("ows_sumcomms")); 
        var dateSearchable = moment(bdate).format('MM/DD/YYYY') 


        body = $(body).text(); 
        auth = auth.substring(auth.indexOf("#") + 1); 
        host = host.substring(host.indexOf("#") + 1); 
        category = category.substring(category.indexOf("#") + 1); 

        if (category.replace(/\s/g, '') === 'WorkinProgress') { 
         category = 'WIP' 
        } 
        if (title == null) { 
         title = '' 
        } 
        if (loc == null) { 
         loc = "Unspecified" 
        } 

        pre.push(category, title, host, bdatein, loc, sumcomms, auth, edatein, ID, body, created, modified, bdate, edate, dateSearchable, ''); 
        dataSet[i] = pre; 

        i++; 
       }); 
      } 
     }); 

     maketables(dataSet, 'FTable'); 
    }); 

function maketables(dataset, table) { 
     table = $('#' + table).DataTable({ 
      data: dataset, 
      sDom: '<"top"lf>rt<"bottom"p>', 
      iDisplayLength: 50, 
      bsearching: false, 
      bInfo: false, 
      bPaginate: true, 
      bProcessing: true, 
      order: [ 
       [12, 'desc'] 
      ], 
      createdRow: function(row, data, dataIndex) { 
       switch (data[0]) { 

        case 'WIP': 
         $(row).find('td:first').addClass('btn btn-success btn-outline').css('min-width','100px').append(' <span class="caret"></span>'); 
         break; 

        case 'Chalk Talk': 
         $(row).find('td:first').addClass('btn btn-warning btn-outline').css('min-width','100px').append(' <span class="caret"></span>'); 
         break; 

        case 'Social': 
         $(row).find('td:first').addClass('btn btn-primary btn-outline ').css('min-width','100px').append(' <span class="caret"></span>'); 
         break; 

        default: 
         $(row).find('td:first').addClass('btn btn-danger btn-outline ').css('min-width','100px').append(' <span class="caret"></span>'); 
         break; 
       } 


      }, 

      columns: [{ 
        title: "Category", 
        name: "category", 
        className: "details-control", 
        orderable: true, 
        DefaultContent: 'Other' 
       }, 
       { 
        title: "Title", 
        name: "title", 
        orderable: false, 
        defaultContent: '' 
       }, 
       { 
        title: "Host", 
        name: "host" 

       }, 
       { 
        title: "Begins", 
        name: "bdatein" 
       }, 

       { 
        title: "Location", 
        name: "loc", 
        visible: false, 
        defaultContent: 'Not Specified' 
       }, 

       { 
        title: "Comments", 
        name: "totalcomms", 
        orderable: false, 
        visible: false, 
        defaultContent: '' 
       }, 
       { 
        title: "Posted By", 
        name: "author", 
        orderable: false, 
        visible: false 
       }, 
       { 
        title: "Ends", 
        name: "edatein", 
        visible: false, 
        defaultContent: '' 
       }, 
       { 
        title: "ID", 
        name: "id", 
        orderable: false, 
        searchable: false, 
        visible: false 
       }, 
       { 
        title: "Details (full)", 
        name: "body", 
        orderable: false, 
        searchable: false, 
        visible: false, 
        defaultContent: '' 
       }, 
       { 
        title: "Created Date", 
        name: "created", 
        orderable: false, 
        searchable: false, 
        visible: false 
       }, 
       { 
        title: "Last Modified", 
        name: "modified", 
        orderable: false, 
        searchable: false, 
        visible: false 
       }, 
       { 
        title: "Begins (Full)", 
        name: "bdate", 
        orderable: false, 
        searchable: false, 
        visible: false 
       }, 
       { 
        title: "Ends (Full)", 
        name: "edate", 
        orderable: false, 
        searchable: false, 
        visible: false, 
        defaultContent: '' 
       }, 
       { 
        title: "Searchable Date", 
        name: "sDate", 
        orderable: false, 
        searchable: true, 
        visible: false, 
        defaultContent: '' 
       }, 
       { 
        title: "Edit", 
        DefaultContent: '' 
       } 
      ], 

      columnDefs: [{ 
       targets: 15, 
       render: function(data, type, row) { 

        if (userName !== null && userName === row[2]) { 
         return '<a href="javascript:editModal(' + row[8] + ')">Edit</a>'; 
        } else if (userName !== null && userName === row[6]) { 
         return '<a href="javascript:editModal(' + row[8] + ')">Edit</a>'; 
        } else { 
         return ''; 
        } 
       } 
      }], 
      "fnDrawCallback": function(oSettings) { 
       $(oSettings.nTHead).hide(); 
      } 
     }); 



     $('#FTable tbody').on('click', 'td.details-control', function() { 
      var tr = $(this).closest('tr'); 
      var row = table.row(tr); 

      if (row.child.isShown()) { 
       // This row is already open - close it 
       row.child.hide(); 
       tr.removeClass('shown'); 
      } else { 
       // Open this row 
       row.child(dateParts(row.data())).show(); 
       tr.addClass('shown'); 
      } 
     }); 

     $('#filter-WIP').on('click', function() { 
       $(this).siblings('.btn').removeClass(function(index, className) { 
        return (className.match(/(^|\s)full-\S+/g) || []).join(' '); 
       }); 
       $(this).addClass('full-wip'); 
       table.search('').columns().search('').draw(); 
       table.columns(0).search('WIP').draw(); 
      } 

     ); 
     $('#filter-Other').on('click', function() { 
       $(this).siblings('.btn').removeClass(function(index, className) { 
        return (className.match(/(^|\s)full-\S+/g) || []).join(' '); 
       }); 
       $(this).addClass('full-oth'); 
       table.search('').columns().search('').draw(); 
       table.columns(0).search('Other').draw(); 
      } 

     ); 
     $('#filter-Social').on('click', function() { 
       $(this).siblings('.btn').removeClass(function(index, className) { 
        return (className.match(/(^|\s)full-\S+/g) || []).join(' '); 
       }); 
       $(this).addClass('full-soc'); 
       table.search('').columns().search('').draw(); 
       table.columns(0).search('Social').draw(); 
      } 

     ); 
     $('#filter-CT').on('click', function() { 
       $(this).siblings('.btn').removeClass(function(index, className) { 
        return (className.match(/(^|\s)full-\S+/g) || []).join(' '); 
       }); 

       $(this).addClass('full-ct'); 
       table.search('').columns().search('').draw(); 
       table.columns(0).search('Chalk Talk').draw(); 
      } 

     ); 
     $('#filter-All').on('click', function() { 
       $(this).siblings('.btn').removeClass(function(index, className) { 
        return (className.match(/(^|\s)full-\S+/g) || []).join(' '); 
       }); 
       $(this).addClass('full-all'); 
       table.search('').columns().search('').draw(); 
       table.columns(0).search('').draw(); 
      } 

     ); 


    } 

Répondre

0

terminé juste en utilisant des fonctions distinctes pour OAuth à google/calendriers Outlook et jamais mis en œuvre une solution pour un groupe d'événements