{"id":1312,"date":"2016-01-28T14:36:33","date_gmt":"2016-01-28T13:36:33","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=1312"},"modified":"2023-07-21T12:29:14","modified_gmt":"2023-07-21T10:29:14","slug":"kolorowy-kalendarz","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/kolorowy-kalendarz\/","title":{"rendered":"Kolorowy kalendarz SharePoint"},"content":{"rendered":"\n<p>Pracuj\u0105c z pakietem SharePoint, wykorzystywanym przez du\u017ca grup\u0119 ludzi, ka\u017cdy wcze\u015bniej czy p\u00f3\u017aniej spotka si\u0119 z problemem kolorowania kalendarza. Mo\u017cemy chcie\u0107 pokolorowa\u0107 go zgodnie z kategoriami wydarze\u0144, ich priorytetem czy osob\u0105, kt\u00f3ra to wydarzenie utworzy\u0142a. Powiedzmy sobie szczerze: ka\u017cdy lubi kolory \ud83d\ude42 Jedno spojrzenie na kolory w kalendarzu sprawi, \u017ce znajdziemy poszukiwan\u0105 informacj\u0119. Tego samego nie mo\u017cna powiedzie\u0107 o jednokolorowym, nudnym kalendarzu:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/11-e1450353839719.png\"><img decoding=\"async\" width=\"840\" height=\"341\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/11-e1450353839719.png\" alt=\"Widok kalendarza SharePoint z jednym kolorem \" class=\"wp-image-1313\"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/21-e1450354137463.png\"><img decoding=\"async\" width=\"840\" height=\"344\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/21-e1450354137463.png\" alt=\"Widok wielokolorowego kalendarza SharePoint \" class=\"wp-image-1314\"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><i><span style=\"font-size: 11.0pt; font-family: 'Calibri',sans-serif; color: black;\">Por\u00f3wnanie kalendarza jednobarwnego z kolorowym<\/span><\/i><\/p>\n\n\n\n<p><span style=\"font-size: 11pt; font-family: Calibri, sans-serif;\">Oczywi\u015bcie, istnieje mo\u017cliwo\u015b\u0107 stworzenia kilku kalendarzy w r\u00f3\u017cnych kolorach i na\u0142o\u017cenia ich na siebie. Jednak ta opcja nie nadaje si\u0119 do zastosowania we wszystkich przypadkach i jest ograniczona do dziesi\u0119ciu kalendarzy na jednym widoku. <\/span><\/p>\n\n\n\n<p><span style=\"font-size: 11pt; font-family: Calibri, sans-serif;\">Chcia\u0142bym Wam zaproponowa\u0107 ciekawsze i r\u00f3wnie proste rozwi\u0105zanie.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-size: 16.0pt; font-family: 'Calibri',sans-serif; color: #1e4e79;\">Kolorowanie kalendarza &#8211; opis rozwi\u0105zania<\/span><\/h2>\n\n\n\n<p><span style=\"font-size: 11pt; font-family: Calibri, sans-serif;\">Przygotowa\u0142em kalendarz urlopowy, w kt\u00f3rym ka\u017cda osoba ma przyporz\u0105dkowany w\u0142asny kolor. Wykorzysta\u0142em do tego dodatkow\u0105 list\u0119, kt\u00f3ra przechowuje konfiguracj\u0119 nazwisko &#8211; kolor. W widoku kalendarza u\u017cy\u0142em edytora skrypt\u00f3w do wprowadzenia skryptu JavaScript. U\u017cytkownik tworz\u0105cy wydarzenie musi poda\u0107 w tytule tylko swoje imi\u0119 i nazwisko, a skrypt zrobi za niego reszt\u0119. Przedstawi\u0119 krok po kroku, jak tego dokona\u0107. Do dzie\u0142a!<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 16.0pt; font-family: 'Calibri',sans-serif; color: #1e4e79;\">Lista konfiguracyjna<\/span><\/h3>\n\n\n\n<p><span style=\"font-size: 11pt; font-family: Calibri, sans-serif;\">Pierwsz\u0105 czynno\u015bci\u0105, jak\u0105 nale\u017cy wykona\u0107, jest dodanie nowej listy niestandardowej. Wchodzimy w zawarto\u015b\u0107 interesuj\u0105cej nas witryny i &#8222;intuicyjnie&#8221; wybieramy Dodaj aplikacj\u0119, a nast\u0119pnie pozycj\u0119 nazwan\u0105 Lista niestandardowa:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/31.png\"><img decoding=\"async\" width=\"305\" height=\"171\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/31.png\" alt=\"&quot;&quot;\" class=\"wp-image-1315\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/31.png 305w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/31-300x168.png 300w\" sizes=\"(max-width: 305px) 100vw, 305px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/41.png\"><img decoding=\"async\" width=\"567\" height=\"270\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/41.png\" alt=\"&quot;&quot;\" class=\"wp-image-1316\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/41.png 567w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/41-300x143.png 300w\" sizes=\"(max-width: 567px) 100vw, 567px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Wprowadzamy nazw\u0119 naszej listy. B\u0119dzie ona u\u017cyta w skrypcie kalendarza.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/51.png\"><img decoding=\"async\" width=\"721\" height=\"238\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/51.png\" alt=\"Dodawanie listy niestandardowej w SharePoint\" class=\"wp-image-1317\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/51.png 721w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/51-300x99.png 300w\" sizes=\"(max-width: 721px) 100vw, 721px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Na nowo stworzonej li\u015bcie tworzymy interesuj\u0105ce nas kolumny. Opis <a href=\"https:\/\/sii.pl\/blog\/ukrywanie-kolumny-z-tytulem-w-liscie\/\">jak ukry\u0107 kolumn\u0119 z tytu\u0142em<\/a> znajdziesz w moim wcze\u015bniejszym po\u015bcie.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/6.png\"><img decoding=\"async\" width=\"572\" height=\"125\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/6.png\" alt=\"Tworzenie kolumn w Sharepoint \" class=\"wp-image-1318\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/6.png 572w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/6-300x66.png 300w\" sizes=\"(max-width: 572px) 100vw, 572px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/7.png\"><img decoding=\"async\" width=\"426\" height=\"147\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/7.png\" alt=\"Widok utworzonej listy z kolumnami w SharePoint\" class=\"wp-image-1319\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/7.png 426w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/7-300x104.png 300w\" sizes=\"(max-width: 426px) 100vw, 426px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Lista jest ju\u017c gotowa. Jak wida\u0107, kolumna z kolorami nie jest przyjemna dla u\u017cytkownika. Je\u015bli nie jeste\u015b osob\u0105, kt\u00f3ra sp\u0119dzi\u0142a ca\u0142e \u017cycie na pisaniu styl\u00f3w&nbsp;CSS, to ci\u0119\u017cko wywnioskowa\u0107, jaki kolor zosta\u0142 wybrany. Poprawmy to troch\u0119. Po pierwsze, musimy utworzy\u0107 plik z JavaScriptem. Nazwijmy go ColumnColoringScript.js i umie\u015b\u0107my w nim nast\u0119puj\u0105cy skrypt:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nSP.SOD.executeFunc(&quot;clienttemplates.js&quot;, &quot;SPClientTemplates&quot;, function() {\n\nSPClientTemplates.TemplateManager.RegisterTemplateOverrides( {\nOnPostRender: function(ctx) {\n\nvar rows = ctx.ListData.Row;\nfor (var i = 0; i &lt; rows.length; i++) {\nvar color = rows&#x5B;i]&#x5B;&quot;Kolor&quot;];\nvar rowId = GenerateIIDForListItem(ctx, rows&#x5B;i]);\nvar row = document.getElementById(rowId);\n$(&#039;.ms-vb2:contains(&#039; + color + &#039;)&#039;).css(&#039;color&#039;, color);\n}\n}\n});\n});\n<\/pre><\/div>\n\n\n<p>Plik wrzucamy na nasz\u0105 stron\u0119 i dodajemy do naszej listy. Jak to zrobi\u0107?<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Otwieramy list\u0119.<\/li>\n\n\n\n<li>Wybieramy opcj\u0119 Edytuj stron\u0119, a nast\u0119pnie Edytuj WebPart.<\/li>\n\n\n\n<li>Na samym dole, w zak\u0142adce R\u00f3\u017cne, w polu \u0141\u0105cze JS wpisujemy odpowiedni token do naszego pliku (<a href=\"https:\/\/msdn.microsoft.com\/en-us\/library\/office\/ms431831.aspx\" rel=\"nofollow\" >wi\u0119cej o \u015bcie\u017ckach i tokenach mo\u017cesz dowiedzie\u0107 si\u0119 ze strony Microsoftu<\/a>).<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/8.png\"><img decoding=\"async\" width=\"262\" height=\"108\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/8.png\" alt=\"Dodawanie pliku z JavaScriptem do strony w SharePoint\" class=\"wp-image-1323\"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>W moim przypadku \u015bcie\u017cka wygl\u0105da\u0142a tak:<\/p>\n\n\n\n<p><i><span style=\"font-size: 11pt; font-family: Calibri, sans-serif;\">~site\/SiteAssets\/ColumnColoringScript.js<\/span><\/i><\/p>\n\n\n\n<p>Oto efekt, o jaki nam chodzi\u0142o. Oczywi\u015bcie, wystarczy lekka modyfikacja skryptu, aby uzyska\u0107 inny efekt &#8211; w zale\u017cno\u015bci od upodoba\u0144.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/9.png\"><img decoding=\"async\" width=\"244\" height=\"133\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/9.png\" alt=\"Lista z dodanym plikiem kolor\u00f3w JavaScript w SharePoint \" class=\"wp-image-1324\"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Oto przyk\u0142ady, kt\u00f3re mo\u017cna wykorzysta\u0107 we w\u0142asnych rozwi\u0105zaniach.<\/p>\n\n\n\n<p>Wystarczy tylko podmieni\u0107 linijk\u0119 $(&#8217;.ms-vb2:contains(&#8217; + color + &#8217;)&#8217;).css(&#8217;color&#8217;, color):<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/10.png\"><img decoding=\"async\" width=\"245\" height=\"132\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/10.png\" alt=\"Lista z dodanym plikiem kolor\u00f3w JavaScript w SharePoint - modyfikacja 1 \" class=\"wp-image-1325\"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><em>row.style.backgroundColor = color;<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/111.png\"><img decoding=\"async\" width=\"246\" height=\"134\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2015\/12\/111.png\" alt=\"Lista z dodanym plikiem kolor\u00f3w JavaScript w SharePoint - modyfikacja 2 \" class=\"wp-image-1326\"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><em>$(&#8217;.ms-vb2:contains(&#8217; + color + &#8217;)&#8217;).css(&#8217;backgroundColor&#8217;, color);<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 16.0pt; font-family: 'Calibri',sans-serif; color: #1e4e79;\">Kalendarz<\/span><\/h3>\n\n\n\n<p>Wreszcie przechodzimy do kalendarza. W tej chwili sprawa jest prosta: na stronie z kalendarzem musimy doda\u0107 dodatkowy WebPart. W kategorii Multimedia i zawarto\u015b\u0107 odnajdujemy Edytor skryptu. Potem klikamy Edytuj wstawk\u0119 i wklejamy kod. Po zatwierdzeniu mo\u017cemy prze\u0142adowa\u0107 stron\u0119 i cieszy\u0107 si\u0119 kolorowym kalendarzem.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n&lt;img src=&quot;data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot; data-wp-preserve=&quot;%3Cstyle%3E%0A.ms-acal-item%7Bdisplay%3Anone%3B%7D%3Cbr%20%2F%3E%0A%3C%2Fstyle%3E&quot; data-mce-resize=&quot;false&quot; data-mce-placeholder=&quot;1&quot; class=&quot;mce-object&quot; width=&quot;20&quot; height=&quot;20&quot; alt=&quot;&lt;style&gt;&quot; title=&quot;&lt;style&gt;&quot; \/&gt;\n&lt;img src=&quot;data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot; data-wp-preserve=&quot;%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.9.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E&quot; data-mce-resize=&quot;false&quot; data-mce-placeholder=&quot;1&quot; class=&quot;mce-object&quot; width=&quot;20&quot; height=&quot;20&quot; alt=&quot;&lt;script&gt;&quot; title=&quot;&lt;script&gt;&quot; \/&gt;\n&lt;img src=&quot;data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot; data-wp-preserve=&quot;%3Cscript%20type%3D%22text%2Fjavascript%22%3E%3C%2Fp%3E%0A%3Cp%3Efunction%20WaitForCalendarToLoad()%20%7B%3Cbr%20%2F%3E%0ASP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids%20%3D%3Cbr%20%2F%3E%0Afunction%20SP_UI_ApplicationPages_SummaryCalendarView%24renderGrids(%24p0)%20%7B%3Cbr%20%2F%3E%0Avar%20%24v_0%20%3D%20new%20Sys.StringBuilder()%3B%3Cbr%20%2F%3E%0Avar%20%24v_1%20%3D%20%24p0.length%3B%20for%20(var%20%24v_2%20%3D%200%3B%20%24v_2%20%3C%20%24v_1%3B%20%24v_2%2B%2B)%20%7B%0Athis.%247V_2(%24v_2%2C%20%24p0%5B%24v_2%5D)%3B%0A%7D%0Afor%20(var%20%24v_3%20%3D%200%3B%20%24v_3%20%3C%20%24v_1%3B%20%24v_3%2B%2B)%20%7B%0A%24v_0.append(&#039;%0A%0A%0A%3Cdiv%3E&#039;)%3B%3Cbr%20%2F%3E%0Athis.%24I_2.%247Q_1(%24v_0%2C%20%24p0%5B%24v_3%5D%2C%20%24v_3)%3B%3Cbr%20%2F%3E%0A%24v_0.append(this.emptY_DIV)%3B%3Cbr%20%2F%3E%0A%24v_0.append(&#039;%3C%2Fdiv%3E%0A%3Cp%3E&#039;)%3B%3Cbr%20%2F%3E%0A%7D%3Cbr%20%2F%3E%0Athis.setInnerHtml(%24v_0.toString())%3B%3Cbr%20%2F%3E%0AgetColoursConfig()%3B%3Cbr%20%2F%3E%0A%7D%3C%2Fp%3E%0A%3Cp%3ESP.UI.ApplicationPages.CalendarStateHandler.prototype.onItemsSucceed%20%3D%20function%20(%24p0%2C%20%24p1)%20%7B%3Cbr%20%2F%3E%0Aif%20(this.%24K_1.%248G_0())%20%7B%3Cbr%20%2F%3E%0Athis.%2428_1()%3B%3Cbr%20%2F%3E%0Areturn%3B%3Cbr%20%2F%3E%0A%7D%3Cbr%20%2F%3E%0Athis.%2441_1%20%3D%20false%3B%3Cbr%20%2F%3E%0Aif%20(this.%243G_1)%20%7B%3Cbr%20%2F%3E%0Athis.%24D_1.%244T_1()%3B%3Cbr%20%2F%3E%0Athis.%243G_1%20%3D%20false%3B%3Cbr%20%2F%3E%0A%7D%3Cbr%20%2F%3E%0Aif%20(SP.UI.ApplicationPages.SU.%242(this.%2439_1%5Bthis.%24j_1%5D))%20%7B%3Cbr%20%2F%3E%0Athis.%2439_1%5Bthis.%24j_1%5D%20%3D%20%5B%5D%3B%3Cbr%20%2F%3E%0A%7D%3Cbr%20%2F%3E%0AArray.addRange(this.%2439_1%5Bthis.%24j_1%5D%2C%20%24p0)%3B%3Cbr%20%2F%3E%0Athis.%24D_1.%247S_1(this.%24j_1%2C%20this.%24v_1%2C%20%24p1%2C%20this.%2439_1%5Bthis.%24j_1%5D)%3B%3Cbr%20%2F%3E%0Athis.%24j_1%2B%2B%3B%3Cbr%20%2F%3E%0Athis.%241h_1()%3B%3Cbr%20%2F%3E%0AgetColoursConfig()%3B%3Cbr%20%2F%3E%0A%7D%3Cbr%20%2F%3E%0A%7D%3C%2Fp%3E%0A%3Cp%3Efunction%20getColoursConfig()%20%7B%3Cbr%20%2F%3E%0Avar%20siteUrl%20%3D%20&#039;%2Fsites%2Fteamsiites%2Fpsd%2Fworkspace%2Fsharepoint&#039;%3B%3C%2Fp%3E%0A%3Cp%3Evar%20clientContext%20%3D%20new%20SP.ClientContext(siteUrl)%3B%3Cbr%20%2F%3E%0Avar%20oList%20%3D%20clientContext.get_web().get_lists().getByTitle(&#039;Konfiguracja%20kalendarza%20urlop%C3%B3w&#039;)%3B%3C%2Fp%3E%0A%3Cp%3Evar%20camlQuery%20%3D%20new%20SP.CamlQuery()%3B%3Cbr%20%2F%3E%0AcamlQuery.set_viewXml(&#039;%3CView%3E%3C%2FView%3E&#039;)%3B%3Cbr%20%2F%3E%0Athis.collListItem%20%3D%20oList.getItems(camlQuery)%3B%3C%2Fp%3E%0A%3Cp%3EclientContext.load(collListItem)%3B%3C%2Fp%3E%0A%3Cp%3EclientContext.executeQueryAsync(%3Cbr%20%2F%3E%0AFunction.createDelegate(this%2C%20this.onQuerySucceeded)%2C%3Cbr%20%2F%3E%0AFunction.createDelegate(this%2C%20this.onQueryFailed)%3Cbr%20%2F%3E%0A)%3B%3Cbr%20%2F%3E%0A%7D%3C%2Fp%3E%0A%3Cp%3Efunction%20onQuerySucceeded(sender%2C%20args)%20%7B%3C%2Fp%3E%0A%3Cp%3Evar%20listItemEnumerator%20%3D%20collListItem.getEnumerator()%3B%3C%2Fp%3E%0A%3Cp%3Ewhile%20(listItemEnumerator.moveNext())%20%7B%3Cbr%20%2F%3E%0Avar%20oListItem%20%3D%20listItemEnumerator.get_current()%3B%3Cbr%20%2F%3E%0Avar%20name%20%3D%20oListItem.get_item(&#039;Osoba&#039;).get_lookupValue()%3B%3Cbr%20%2F%3E%0Avar%20colour%20%3D%20oListItem.get_item(&#039;Kolor&#039;)%3B%3C%2Fp%3E%0A%3Cp%3E%24(&#039;a%3Acontains(&#039;%20%2B%20name%20%2B%20&#039;)&#039;).closest(&#039;.ms-acal-item&#039;).css(&#039;background-color&#039;%2C%20colour)%3B%3Cbr%20%2F%3E%0A%7D%3Cbr%20%2F%3E%0A%24(&#039;.ms-acal-item&#039;).css(&#039;display&#039;%2C%20&#039;block&#039;)%3B%3Cbr%20%2F%3E%0A%7D%3C%2Fp%3E%0A%3Cp%3Efunction%20onQueryFailed(sender%2C%20args)%20%7B%3Cbr%20%2F%3E%0A%24(&#039;.ms-acal-item&#039;).css(&#039;display&#039;%2C%20&#039;block&#039;)%3B%3Cbr%20%2F%3E%0Aalert(&#039;B%C5%82%C4%85d%20pobierania%20listy%20konfiguracyjnej%20kolor%C3%B3w%20kalendarza.%20&#039;%20%2B%20args.get_message()%20%2B%20&#039;%5Cn&#039;%20%2B%20args.get_stackTrace())%3B%3Cbr%20%2F%3E%0A%7D%3C%2Fp%3E%0A%3Cp%3Efunction%20ShowCalendarRibbon%20()%3Cbr%20%2F%3E%0A%7B%3Cbr%20%2F%3E%0AsetTimeout(%20function()%7B%3Cbr%20%2F%3E%0Avar%20defaultWP%20%3D%20document.getElementById(%20%22MSOZoneCell_WebPartWPQ2%22)%3B%3Cbr%20%2F%3E%0AWpClick(%20%7B%20target%3AdefaultWP%2CsrcElement%3AdefaultWP%7D)%3B%3Cbr%20%2F%3E%0ASP.Ribbon.WebPartComponent.%243.deselectWebPartAndZone%20%3D%20function()%20%7B%20%7D%3B%3Cbr%20%2F%3E%0A%7D%2C100)%3B%3Cbr%20%2F%3E%0A%7D%3C%2Fp%3E%0A%3Cp%3ELoadSodByKey(%22SP.UI.ApplicationPages.Calendar.js%22%2C%20function%20()%20%7B%3Cbr%20%2F%3E%0AWaitForCalendarToLoad()%3B%3Cbr%20%2F%3E%0A%7D)%3B%3C%2Fp%3E%0A%3Cp%3E%24(document).ready(function()%7B%3Cbr%20%2F%3E%0AExecuteOrDelayUntilScriptLoaded(ShowCalendarRibbon%2C%20%22sp.ribbon.js%22%20)%3B%3Cbr%20%2F%3E%0A%7D)%3B%3C%2Fp%3E%0A%3Cp%3E%3C%2Fscript%3E&quot; data-mce-resize=&quot;false&quot; data-mce-placeholder=&quot;1&quot; class=&quot;mce-object&quot; width=&quot;20&quot; height=&quot;20&quot; alt=&quot;&lt;script&gt;&quot; title=&quot;&lt;script&gt;&quot; \/&gt;\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-size: 16.0pt; font-family: 'Calibri',sans-serif; color: #1e4e79;\">Personalizacja skryptu<\/span><\/h2>\n\n\n\n<p>Oczywi\u015bcie, nie ka\u017cdy jest zainteresowany kalendarzem urlopowym lub nie posiada takiej samej listy albo struktury katalog\u00f3w. To nie problem. Skonfigurujemy ka\u017cd\u0105 rzecz po kolei.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span style=\"font-size: 14pt; font-family: Calibri, sans-serif; color: #000000;\">Opis skryptu<\/span><\/h4>\n\n\n\n<p>Skrypt sk\u0142ada si\u0119 z kilku cz\u0119\u015bci, kt\u00f3re mo\u017cemy wyr\u00f3\u017cni\u0107:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Na pocz\u0105tku ukrywane s\u0105 wydarzenia. Istnieje tu problem natury estetycznej, gdy\u017c kalendarz wy\u015bwietla si\u0119 z domy\u015blnymi kolorami, a skrypt z u\u0142amkiem sekundy op\u00f3\u017anienia nak\u0142ada kolory. Je\u015bli nie ukryjemy wydarze\u0144, przeskok kolor\u00f3w b\u0119dzie widoczny.<\/li>\n\n\n\n<li>Funkcja WaitForCalendarToLoad nadpisuje domy\u015blne zdarzenia kalendarza. Usuni\u0119cie tej funkcji spowoduje, \u017ce kolory w kalendarzu nie na\u0142o\u017c\u0105 si\u0119 przy zmianie widoku czy kolejnych miesi\u0119cy. Oczekuje ona r\u00f3wnie\u017c na za\u0142adowanie si\u0119 kalendarza przed na\u0142o\u017ceniem kolor\u00f3w.<\/li>\n\n\n\n<li>Funkcja getColoursConfig pobiera konfiguracj\u0119 kalendarza z listy wykorzystuj\u0105c SharePoint Client Object Model. Kwerenda wykonywana jest asynchronicznie, a od jej powodzenia zale\u017cy wywo\u0142anie jednej z kolejnych metod.<\/li>\n\n\n\n<li>Funkcja onQuerySucceeded jest wywo\u0142ywana, gdy uda si\u0119 pobra\u0107 list\u0119 konfiguracyjn\u0105. Tutaj zawiera si\u0119 ca\u0142a magia. Przegl\u0105dana jest lista konfiguracyjna i odpowiednie kolory nak\u0142adane s\u0105 na wydarzenia zapisanych os\u00f3b. Po udanym kolorowaniu wydarzenia te s\u0105 wy\u015bwietlane.<\/li>\n\n\n\n<li>Funkcja onQueryFailed uruchamia si\u0119 przy niepowodzeniu kwerendy. Wy\u015bwietla wydarzenia z domy\u015blnymi kolorami i finalizuje swoje dzia\u0142anie komunikatem o b\u0142\u0119dzie.<\/li>\n\n\n\n<li>Funkcja ShowCalendarRibbon jest opcjonalna. Dodaj\u0105c WebPart Edytor Skrypt\u00f3w sprawiamy, \u017ce na stronie znajduj\u0105 si\u0119 co najmniej dwa WebParty. W takim wypadku SharePoint nie wybiera \u017cadnego z nich jako domy\u015blny, przez co nie widzimy wst\u0105\u017cki z opcjami. Ta funkcja ustawia focus na nasz kalendarz.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span style=\"font-size: 14pt; font-family: Calibri, sans-serif; color: #000000;\">Wyb\u00f3r listy<\/span><\/h4>\n\n\n\n<p><span style=\"font-size: 11pt; font-family: Calibri, sans-serif;\">Po pierwsze, musimy poda\u0107 \u015bcie\u017ck\u0119 do strony, na kt\u00f3rej znajduje si\u0119 nasza lista. To z niej w\u0142a\u015bnie pobierzemy konfiguracje. Wystarczy podmieni\u0107 URL:<\/span><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nvar siteUrl = '\/sites\/teamsiites\/psd\/workspace\/sharepoint';\n<\/pre><\/div>\n\n\n<p>Oczywi\u015bcie, na naszej stronie mo\u017ce znajdowa\u0107 si\u0119 wi\u0119cej ni\u017c jedna lista. Nazw\u0119 naszej precyzujemy par\u0119 linijek ni\u017cej:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nvar oList = clientContext.get_web().get_lists().getByTitle('Konfiguracja kalendarza urlop\u00f3w');\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\"><span style=\"font-size: 14pt; font-family: Calibri, sans-serif; color: #000000;\">Wyb\u00f3r kolumn<\/span><\/h4>\n\n\n\n<p>Ostatni\u0105 rzecz\u0105, kt\u00f3ra mo\u017ce wymaga\u0107 konfiguracji, jest wyb\u00f3r kolumn z listy:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n&lt;\/pre&gt;\nvar name = oListItem.get_item(&#039;Osoba&#039;).get_lookupValue();\n \nvar colour = oListItem.get_item(&#039;Kolor&#039;);\n&lt;pre&gt;\n<\/pre><\/div>\n\n\n<p>Wprowadzamy tutaj nazw\u0119 kolumny, po kt\u00f3rej przeszukujemy list\u0119 i kolumny, z kt\u00f3rej pobieramy kolor. U mnie by\u0142y to kolumny Osoba i Kolor. W tym w\u0142a\u015bnie miejscu, w funkcji onQuerySucceeded mo\u017cna dokonywa\u0107 w\u0142asnych zmian. Liczba mo\u017cliwo\u015bci jest wr\u0119cz nieograniczona. Kolumn\u0119 Kolor mo\u017cemy przyk\u0142adowo zast\u0105pi\u0107 kolumn\u0105 z kategori\u0105, a funkcj\u0119 w skrypcie &#8211; na sztywno wpisanymi warto\u015bciami kolor\u00f3w.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-size: 16.0pt; font-family: 'Calibri',sans-serif; color: #1e4e79;\">Podsumowanie<\/span><\/h2>\n\n\n\n<p>Powy\u017cej przedstawi\u0142em jeden ze sposob\u00f3w pokolorowania kalendarza, wykorzystuj\u0105c do tego list\u0119 konfiguracyjn\u0105. Jak wida\u0107, nie jest to trudne, a przegl\u0105dany kalendarz jest przyjemny dla oka. Jedyn\u0105 rzecz\u0105, kt\u00f3ra mo\u017ce budzi\u0107&nbsp;w\u0105tpliwo\u015bci, jest spos\u00f3b wprowadzenia koloru. Mia\u0142em do dyspozycji niestandardowe narz\u0119dzie w postaci Color Pickera, kt\u00f3re znacznie u\u0142atwia wype\u0142nianie listy konfiguracyjnej.<\/p>\n\n\n\n<p>Ten wpis mo\u017ce \u015bwietnie pos\u0142u\u017cy\u0107 jako punkt zaczepienia przy wypracowaniu w\u0142asnego rozwi\u0105zania. Wystarczy podstawowa znajomo\u015b\u0107 JavaScript, aby zmodyfikowa\u0107 funkcj\u0119 koloruj\u0105c\u0105. Mo\u017cemy utworzy\u0107 system priorytet\u00f3w, kategorii czy kolorowania na podstawie pozosta\u0142ych do wydarzenia dni. Je\u015bli chcesz zag\u0142\u0119bi\u0107 si\u0119 w temat, zapraszam do zapoznania si\u0119 z udost\u0119pnionymi poni\u017cej stronami.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-size: 16.0pt; font-family: 'Calibri',sans-serif; color: #1e4e79;\">Powi\u0105zane artyku\u0142y<\/span><\/h2>\n\n\n\n<p>Wspomniane w artykule om\u00f3wienie token\u00f3w i URL\u00f3w:<br><a href=\"https:\/\/msdn.microsoft.com\/en-us\/library\/office\/ms431831.aspx\" class=\"ek-link\" rel=\"nofollow\" >https:\/\/msdn.microsoft.com\/en-us\/library\/office\/ms431831.aspx<\/a><\/p>\n\n\n\n<p>Pobieranie (i nie tylko) element\u00f3w z SharePoint&#8217;owej listy przy pomocy JavaScript:<br><a href=\"https:\/\/msdn.microsoft.com\/en-us\/library\/office\/hh185007(v=office.14).aspx\" class=\"ek-link\" rel=\"nofollow\" >https:\/\/msdn.microsoft.com\/en-us\/library\/office\/hh185007(v=office.14).aspx<\/a><\/p>\n\n\n\n<p>Kolorowanie kalendarza po kategorii. Ciekawy wpis na blogu o podobnej tematyce:<br><a href=\"http:\/\/blog.metrostarsystems.com\/2014\/07\/16\/sharepoint-2013-any-color-coded-calendar-step-by-step\/\" class=\"ek-link\" rel=\"nofollow\" >http:\/\/blog.metrostarsystems.com\/2014\/07\/16\/sharepoint-2013-any-color-coded-calendar-step-by-step\/<\/a><\/p>\n\n\n\n<p>Opis jak wykorzysta\u0107 workflow do wy\u015bwietlenia niestandardowego tytu\u0142u wydarzenia:<br><a href=\"http:\/\/blog.incworx.com\/blog\/sharepoint-administrators-blog\/a-simple-guide-to-show-more-information-on-a-calendar-event\" class=\"ek-link\" rel=\"nofollow\" >http:\/\/blog.incworx.com\/blog\/sharepoint-administrators-blog\/a-simple-guide-to-show-more-information-on-a-calendar-event<\/a><\/p>\n\n\n\n<p>Dzi\u0119kuj\u0119 za zainteresowanie artyku\u0142em! Mam nadziej\u0119, \u017ce Tw\u00f3j kalendarz nabierze nowych kolor\u00f3w.<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-left kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;1312&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;1&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;11&quot;,&quot;greet&quot;:&quot;&quot;,&quot;legend&quot;:&quot;5\\\/5 ( vote: 1)&quot;,&quot;size&quot;:&quot;18&quot;,&quot;title&quot;:&quot;Kolorowy kalendarz SharePoint&quot;,&quot;width&quot;:&quot;139.5&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} ( {votes}: {count})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 139.5px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 14.4px;\">\n            5\/5 ( vote: 1)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Pracuj\u0105c z pakietem SharePoint, wykorzystywanym przez du\u017ca grup\u0119 ludzi, ka\u017cdy wcze\u015bniej czy p\u00f3\u017aniej spotka si\u0119 z problemem kolorowania kalendarza. Mo\u017cemy &hellip; <a class=\"continued-btn\" href=\"https:\/\/sii.pl\/blog\/kolorowy-kalendarz\/\">Continued<\/a><\/p>\n","protected":false},"author":18,"featured_media":15434,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1314],"tags":[56,200,198,199,203,202,201,205,95,204],"class_list":["post-1312","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-na-twardo","tag-sharepoint","tag-app-model","tag-calendar","tag-color-calendar","tag-custom-list","tag-javascript","tag-jslink","tag-kolorwy-kalendarz","tag-list","tag-styles"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2016\/01\/kolorowy-kalendarz-sharepoint-1.jpg","category_names":["Development na twardo"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/1312"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/comments?post=1312"}],"version-history":[{"count":2,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/1312\/revisions"}],"predecessor-version":[{"id":23032,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/1312\/revisions\/23032"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media\/15434"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media?parent=1312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/categories?post=1312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/tags?post=1312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}