2017-07-05 3 views
0

カレンダーの機能を実装しようとしています。私がしようとしていることは、リスト(イベントのタイトル、イベントの説明、イベントのホストなどの他の情報と一緒に)から日付を取得し、ユーザーのデフォルトカレンダーまたはGoogleのような優先カレンダーと同期させることです/ outlookカレンダー。私はjavascriptでこれを達成しようとしています。カレンダーのWebパーツのない日付をOutlook/Google/Desktopのカレンダーに同期

現在私が想定しているのは、私がすでに行っているSP Servicesを使用してデータを取得していることです。私はこれも既に働いているDataTablesを使ってイベントの "リストビュー"を構築するためにこれを使用しています。

「カレンダーに追加」という各イベントにボタンを追加したいと思います。クリックすると、デフォルトカレンダー(デスクトップカレンダーに便利です)にイベントが追加されるか、ユーザーが追加するカレンダー(Google/Outlookなどの間)。その上に、カレンダーに追加するイベントのバッチを選択するボタンがあります。

これは私が現在知っているものやJavaScriptよりはるかに優れていますが、いずれの方向にも感謝しています。私はすでにGoogleカレンダーAPIを通して読んで始めましたが、それはまだ取り込むのにはかなりです。また、SharePoint上のユーザーはデフォルトのOutlook電子メールを持つ従業員です。私はそれがイベントを追加する最も簡単な方法だろうと思っていますが、私はどのようにA)カレンダーへのアクセスを取得するだけで、サインインしてB)カレンダーへの追加を承認する方法を確認していない。終わった

それは、すべての有益だ場合、これはSPのサービスを使用して、私の現在のコードで、DataTableの

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

     ); 


    } 

答えて

0

だけ/ OutlookのカレンダーをGoogleにOAuthのた​​めの別々の機能を使用すると、イベントのグループのためのソリューションを実装したことがない

関連する問題