Custom Kalender / JS-Link / Display Template

Martin089 Als Antwort am 1 Juli 2015 10:23

Hi Patrick,

hast du denn schon einmal versucht den Kalender: http://deviprsd21.github.io/Calendario/index2.html in Sharepoint abzubilden?

Eine Anweisung wie der zu benutzen ist, findest du ja auch auf der Webseite ( http://tympanus.net/codrops/2012/11/27/calendario-a-flexible-calendar-plugin/ )
und das schaut machbar aus. Wenn du bei dem Versuch irgendwo nicht weiterkommst, kannst du ja hier detaillierter fragen, wo genau das Problem ist.

VG,
Martin089

Patrick Als Antwort am 1 Juli 2015 10:58

Hey Martin,

den Kalender in SharePoint, das wär der Traum. Habe aber leider nicht den Hauch einer Ahnung wie ich da überhaupt anfange.

Wohin kommt der ganze Code? Direkt über SPD in den Code der Seite? In einen Skript-Editor? Wie kommen dann Elemente in den Kalender? Durch eine Liste? Viele Fragen, leider bin ich da mal noch "Total Anfänger". Ein Step-By-Step Guide wäre super, oder ein Video ;)

Oder irgendwas, andem ich mich mich entlang angeln kann. Dann würd ich wenn alles mal bei mir klappt ein Tutorial machen!

Patrick Als Antwort am 1 Juli 2015 11:54

Habe die files runtergeladen (http://tympanus.net/codrops/2012/11/27/calendario-a-flexible-calendar-plugin) und in meine Masterpage Gallerie hochgeladen und veröffentlicht.

(~sitecollection/_catalogs/masterpage/calendario/js bzw. /css).

Im "js-Ordner" befinden sich nun data.js, jquery.calendario.js und modernizr.custom.63321.js).

Im "css-Ordner" sind calendar.css, custom_1.css, custom_2.css und demo.css. 

Soweit so gut. Aber wie und wo fange ich nun an? Sorry für die totale Ahnungslosigkeit.

Hätte am liebsten eine Liste mit den Spalten:

1. Titel
2. Beschreibung
3. Anfangsdatum
4. Enddatum
5. Teilnehmer

Patrick Als Antwort am 1 Juli 2015 13:41

Versuche nun mal irgendwo anzufangen. Bisheriger Stand:

Ein Skript Editor auf einer Seite eingefügt und nach Klick auf "Codeausschnitt bearbeiten" das hier eingefügt:

------------

<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>

------------------

Ist das ein Step in die richtige Richtung oder bin ich da total auf dem Holzweg?

Martin089 Als Antwort am 1 Juli 2015 13:52

In den Dateien von der Seite findest du auch die calendario.html, guck dir die mal an, da siehst du wie der Kalender von denen verwendet wird.

Ansonsten:

<div id="calendar" class="fc-calendar-container"> </div> gehört nicht ins JavaScript, das ist ganz normales HTML. Du solltest dich auch bei deinen
CSS Dateien für die richtigen entscheiden, ich glaube in deinem Fall reichen die beiden "calendar.css" und "custom_2.css".

Martin089 Als Antwort am 1 Juli 2015 13:43

Also den Kalender nutzen ist die eine Sache, aber Listenelemente dort darzustellen eine ganz andere.

Ich hab mal testweise den costum-Kalender auf einer Webseite genutzt, dafür hab ich ein HTML-Formularwebpart und ein
Inhaltseditor-Webpart genutzt, das läuft auch ganz gut. Das Ziel was du aber verfolgst, wird so einfach nicht erreichbar sein.

Warum nutzt du eigentlich nicht den Sharepoint-Kalender, wenn du schon Listenelemente dort abbilden möchtest?

Patrick Als Antwort am 1 Juli 2015 13:50

Der SharePoint Standardkalender ist für mein Ziel (ca. 8 Termine) pro Tag nicht sehr schön anzuschauen. 

Und wenn es gleich noch einen eben schönen Kalender gibt, wäre das optimal diesen dazu zu verwenden.

Martin089 Als Antwort am 1 Juli 2015 13:57

Das ist richtig, aber etwas womit der Anwender leben muss. Es gibt ja auch die verschiedenen Ansichten wie Monats/Wochen/Tages-Ansichten.
Wenn es nur um die Darstellung geht, würde ich da Aufwand gegen Nutzen nochmal überdenken. Nachher kommt noch der Wunsch, dass 40 Termine pro Tag in der Ansicht überschaubar dargestellt werden soll, dann hättest du da auch sicher mit dem custom-Kalender Probleme oder er müsste extrem groß werden ^^´

Patrick Als Antwort am 1 Juli 2015 14:16

Habe in meinem download nur eine index.html und eine index2.html. Diese hab ich grad angeschaut. Keine Ahnung wie ich das irgendwie sinnvoll in den Skript Editor reinpacke.

Ich würde am liebsten einen Punkt anzeigen, wenn ein Ereignis am Tag ist und bei zwei oder mehreren Terminen am Tag zwei Punkte ineinander, so halb verdeckt.

Aber zuerst müsste es mir mal irgendwie in meinem Skript Editor irgendetwas anzeigen :D :(

PS: Skript hab ich im obigen Post mal abgeändert, aber ich bin hier halt einfach ein total NOOB!

Martin089 Als Antwort am 1 Juli 2015 14:48

So müsste das HTML aussehen (in einen HTML-Formularwebpart reinkopieren):

<div class="custom-calendar-wrap custom-calendar-full">
                <div class="custom-header clearfix">
                    <h3 class="custom-month-year">
                        <span id="custom-month" class="custom-month"></span>
                        <span id="custom-year" class="custom-year"></span>
                        <nav>
                            <span id="custom-prev" class="custom-prev"></span>
                            <span id="custom-next" class="custom-next"></span>
                            <span id="custom-current" class="custom-current" title="Got to current date"></span>
                        </nav>
                    </h3>
                </div>
                <div id="calendar" class="fc-calendar-container"></div>
            </div>
        </div>

und folgendes in einem js-Script, welches du mit nem Inhaltseditor-Webpart hinzufügst:

<script type="text/javascript" src="http://url/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://url/Calendario.js"></script>
        <script type="text/javascript" src="js/data.js"></script>
        <script type="text/javascript">   
            $(function() {
           
                var cal = $( '#calendar' ).calendario( {
                        onDayClick : function( $el, $contentEl, dateProperties ) {

                            for( var key in dateProperties ) {
                                console.log( key + ' = ' + dateProperties[ key ] );
                            }

                        },
                        caldata : codropsEvents
                    } ),
                    $month = $( '#custom-month' ).html( cal.getMonthName() ),
                    $year = $( '#custom-year' ).html( cal.getYear() );

                $( '#custom-next' ).on( 'click', function() {
                    cal.gotoNextMonth( updateMonthYear );
                } );
                $( '#custom-prev' ).on( 'click', function() {
                    cal.gotoPreviousMonth( updateMonthYear );
                } );
                $( '#custom-current' ).on( 'click', function() {
                    cal.gotoNow( updateMonthYear );
                } );

                function updateMonthYear() {               
                    $month.html( cal.getMonthName() );
                    $year.html( cal.getYear() );
                }

                // you can also add more data later on. As an example:
                /*
                someElement.on( 'click', function() {
                   
                    cal.setData( {
                        '03-01-2013' : '<a href="#">testing</a>',
                        '03-10-2013' : '<a href="#">testing</a>',
                        '03-12-2013' : '<a href="#">testing</a>'
                    } );
                    // goes to a specific month/year
                    cal.goto( 3, 2013, updateMonthYear );

                } );
                */
           
            });
        </script>

Die Links zu den Scripten musst du natürlich mit deinen Austauschen und die gewünschen CSS Dateien auch noch angeben.

Das hab ich jetzt auch nur bissl zusammengesucht und das ganz kommt von der Webseite von der Calendario stammt.

Patrick Als Antwort am 1 Juli 2015 16:24

Hey Martin! Vielen Dank für deine Mühe!

Sollte aber generell auch alles zusammen in einem Skript-Editor in SharePoint 2013 möglich sein, oder? Komischerweise bekomm' ich es dort nicht hin, script src abgeändert. :(

Martin089 Als Antwort am 2 Juli 2015 10:29

Mach es am besten in 2 verschiedenen Webparts..das HTML in einen HTML-Formularwebpar und das JavaScript über den Inhaltseditor..achte natürlich darauf das, das JavaScript erst greift, wenn alle Objekte auf der Webseite fertig geladen sind. Zum Beispiel mit:

$(document).ready(function(){

//Quellcode hier

});

Patrick Als Antwort am 10 Juli 2015 11:08

Nach vielen Versuchen bin ich nun bei dem Standardkalender geblieben und habe diesen mit CSS und Javascript so angepasst, dass es für meine Zwecke passt.

Wie das geht und wie es aussieht habe ich als Step by Step Guide gepostet:

(Eingefärbte Kategorien im Kalender und Icons für die verschiedenen Kategorien)

https://blog.afrait.com/color-calender-and-icons-in-10-easy-steps-de/

Hier eine kleine Vorschau:

Vielleicht ist das für den ein oder anderen auch nützlich...