8

I'm looking for a nice custom calendar. Display template or jslink, doesn't matter.

Something like that would be awesome:

http://deviprsd21.github.io/Calendario/index2.html

enter image description here

Has someone tried to add this to SharePoint?

Or are there some other nice calendars for SharePoint with an good documentation or how-to?

EDIT: I downloaded the sourcefiles from the above calendar "here" and tried to implement it into an script editor. But I can't get it working. Any ideas? All files are published as a major version.

PS: I'm totally new to this, so please forgive my question...

<script type="text/javascript" src="~sitecollection/_catalogs/masterpage/Calendario/js/data.js"></script>
<script type="text/javascript" src="~sitecollection/_catalogs/masterpage/Calendario/js/jquery.calendario.js"></script>
<script type="text/javascript" src="~sitecollection/_catalogs/masterpage/Calendario/js/modernizr.custom.63321.js"></script>

<link rel="stylesheet" type="text/css" href="~sitecollection/_catalogs/masterpage/Calendario/css/calendar.css" />
<link rel="stylesheet" type="text/css" href="~sitecollection/_catalogs/masterpage/Calendario/css/custom_2.css" />

<script type="text/javascript">
    $( '#calendar' ).calendario();
</script>

<div id="calendar" class="fc-calendar-container"></div>
3

I didn't find a better solution for me so I modified the ootb calender a little bit. Here the steps if anyone want's to take a look into it:

If you don't have a calendar already, click on the cogwheel, site contents and then add an app.

enter image description here

  1. Add a Calendar and give it a name. In this guide I took the name "Eventcalendar".

enter image description here

  1. Add a new column. You can do that in two different ways. Click on List Settings and then Create Column or directly like in the picure below:

enter image description here

  1. This column will show the icon and the category of the events. In my case the name is "kind" and the choice values are: Fair, Release, Lecture and something else.

enter image description here

  1. Add another column with the name "kindtitle" and type "calculated" like in the next picure. The column will help to find the right items and change the background color. The formular is:

    = “|||” & [kind] & “|||” & [Title]

Be careful if you copy the above formular that the apostrophes are correct.

enter image description here

  1. Now create or edit the view of your calendar and change the month, week and dayview's title to the newly created column (kindtitle). I used the default view.

enter image description here

  1. Edit the site and add a content editor. As you maybe have already seen, the title in the events has now changed.

enter image description here

  1. Add the following script into the content editor. Click on "Click here to add new content", then "Edit Source" and then paste the script and save everything.

    If you have different choice options you have to change them in the script (Fair, Release, Lecture, something else). You can also change the colors (bgcolor = background color) and (fgcolor = text color).

<style>
 .ms-acal-item{display:none;}
 </style><script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js" type="text/javascript"></script><script type="text/javascript">
 var shouldcolortext = true;
 LoadSodByKey("SP.UI.ApplicationPages.Calendar.js", function () {
 window.setTimeout(ColorCalendar, 1000);
 });
 var SEPARATOR = "|||";
 function ColorCalendar() {
 var container = jQuery('#s4-bodyContainer');
 var query = 'a:contains('' + SEPARATOR + '')';
 if(container.find(query).length > 0)
 {
 container.find(query).each(function (i) {
 var box = jQuery(this).parents('div[title]');
 var colors = GetColorCodeFromCategory(GetCategory(this.innerHTML));
 var anchor = jQuery(this);
 anchor.text(GetActualText(anchor.text()))
 box.attr("title", GetActualText(box.attr("title")));
 box.css('background-color', colors[0]);
 box.css('display', 'block');
 if(shouldcolortext )
 {
 box.find('div, a').css("cssText", "color: " + colors[1] + " !important;");
 }
 });
 }
 window.setTimeout(ColorCalendar, 2000);
 }
 function GetActualText(originalText) {
 var parts = originalText.split(SEPARATOR);
 return parts[0] + parts[2];
 }
 function GetCategory(originalText) {
 var parts = originalText.split(SEPARATOR);
 return parts[1];
 }
 function GetColorCodeFromCategory(category) {
 var bgcolor = null;
 var fgcolor = null;
 switch (category.trim()) {
 case 'Fair':
 bgcolor = '#ECD078';
 fgcolor = '#000000';
 break;
 case 'Release':
 bgcolor = '#D95B43';
 fgcolor = '#000000';
 break;
 case 'Lecture':
 bgcolor = '#C02942';
 fgcolor = '#000000';
 break;
 case 'something else':
 bgcolor = '#53777A';
 fgcolor = '#000000';
 break;
 }
 return [bgcolor, fgcolor];
 }
 </script>

enter image description here

  1. If you want to add the calender to a different site as a webpart, don't forget to add the Content Editor with the script.

I did that on the start page "events" and added on the right side the calendar in a different view. (Kind, Title, Start date, End date). This list will give the user an overview in a list style but instead of the text you can display icons.

enter image description here

Save the following script and add it to your "Event overview listview". As always, please double check the values of your own environmet. (Fair, Release, Lecture, something else) and of course the image source.

<script>
// created by Patrick - don't be afraIT.com
(function () {
var kategorieFieldCtx = {};
kategorieFieldCtx.Templates = {};
kategorieFieldCtx.Templates.Fields = {
"kind": {
"View": KategorieViewTemplate
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(
kategorieFieldCtx
);
})();
function KategorieViewTemplate(ctx) {
var _kategorie = ctx.CurrentItem.kind;
if (_kategorie == 'Release')
{ 
return "<img src='http://sp13/events/SiteAssets/release_16.png'/>";
}
if (_kategorie == 'Fair')
{ 
return "<img src='http://sp13/events/SiteAssets/messe_16.png'/>";
}
if (_kategorie == 'Lecture')
{ 
return "<img src='http://sp13/events/SiteAssets/vortrag_16.png'/>";
}
else
{
return "<img src='http://sp13/events/SiteAssets/etwasAnderes_16.png'/>";
}
}
</script>

After that the start page should look similar to mine:

enter image description here

If you want to get the pictures you can check my blog post with the links to them or see the german version here.

  • Would be great, if someone downvotes an answer, he/she please comment it to know what the problem is... – Patrick Jan 8 '16 at 12:23
  • Although I haven't made the downvote: Your answer looks like self promotion for your blog only. And the screenshot / picture provides no relevant content neither to the original question nor to the answer. – jcp Jan 8 '16 at 16:00
  • @jcp didn't know that this is a huge problem here. Updated my answer with the full blog post from my site. Hope this is ok, if not, please let me know – Patrick Jan 8 '16 at 16:44
1

I provided code to use jQuery FullCalendar for a previous issue:

Fetching items from sharepoint list and attaching in Fullcalendar with JSOM

Let me know if you need help with that code.

I updated the code to strip out most of the fullcalendar stuff so you can use this code for just about any calendar that accepts a JSON array.

You just need to modify the NewEvents.push structure to match what the library wants and then modify CalendarSetup to call the new library.

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.css" />
<script>
    $(document).ready(function() {
        LoadSodByKey("sp.js", function() {
            getCalendarData();
        });

    });

    function getCalendarData() {
        var deferred = jQuery.Deferred();
        var camlQuery = "<View><Query><RowLimit></RowLimit>15 </Query></View>"
        new getListData(deferred, "Calendar", camlQuery);
        deferred.done(function(n) {
            var NewEvents = [];

            $.each(n, function(i, v) {
                NewEvents.push({
                        'title': v.Title,
                        start: v.EventDate.toDateString()
                    }

                );

            });

            //console.log(NewEvents);
            CalendarSetup(NewEvents);
        });

    }

    function getListData(deferredObj, listName, mycamlQuery) {
        //this is necessary to ensure the library is loaded before function triggered
        var clientContext = new SP.ClientContext.get_current();
        this.camlText = mycamlQuery;
        this.listName = listName
        this.dfd = jQuery.Deferred();
        this.dfd.done(function(n) {
            deferredObj.resolve(n);
        });
        this.myList = clientContext.get_web().get_lists().getByTitle(listName); //actual list name here
        this.camlQuery = new SP.CamlQuery();
        this.camlQuery.set_viewXml(mycamlQuery); //caml statement goes here between the single quotes
        this.namedListItem = this.myList.getItems(this.camlQuery);
        this.listResults = clientContext.loadQuery(this.namedListItem);
        clientContext.executeQueryAsync(Function.createDelegate(this, onQuerySucceeded), Function.createDelegate(this, onQueryFailed));
    }

    function onQuerySucceeded(sender, args) {
        this.returnedObjects = [];
        for (var i = 0; i < this.listResults.length; i++) {
            this.returnedObjects.push(this.listResults[i].get_fieldValues());
        }
        this.dfd.resolve(this.returnedObjects);
    }

    function onQueryFailed(sender, args) {
        var failMessage = 'Request failed. ' + args.get_message() + '\n' + args.get_stackTrace();
        console.log(failMessage);
        if (this.camlText) {
            console.log(this.camlText)
        }
        if (this.listName) {
            console.log(this.listName)
        }
        SP.UI.Notify.addNotification(failMessage, true);
    }

    function CalendarSetup(NewEvents) {
        schedulecCalendar = $('#myCalendar').fullCalendar({
            events: NewEvents,
        });
    }
</script>

<div id="myCalendar"></div>
  • thx Bryan, for answering that fast. I checked the design at fullcalendar.io but it's no exactly what I want. Some other ideas? – Patrick Jun 30 '15 at 14:33
  • 1
    I took a look at the code of the example you sent and it looks like someone hacked together an upgrade to the original code. Unless you are very experienced in JS, I would use a more popular and supported calendar. FullCal can look like whatever you want and do whatever you want with CSS work. Past the initial set-up I am not sure what you want? – Bryan Mathews Jun 30 '15 at 15:24
  • okay, I will try this calendar. Is there a easy step by step guide on how to set it up in SharePoint 2013? Do you know any other calendars? – Patrick Jul 1 '15 at 7:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.