Google Kalender in der CometVisu

[mclb]

Hi,

hat sich schon mal jemand Gedanken gemacht, wie man Google Kalender in die CometVisu bringen könnte? Es gibt ja mit der Google API V3 eine Javascript-API, für jemand, der damit was anfangen kann, ist das also wahrscheinlich nicht all zu schwierig.

Ich selbst bin dzt. leider dezent überfordert damit, ein eigenes Plugin zu schreiben.

Schön wäre es halt, wenn man mehrere Kalender angeben kann, die gelesen werden sollen und dann werden die Termine der kommenden Woche (oder von mir aus auch eine definierte Anzahl) auf der CometVisu angezeigt.

Evtl. findet sich ja jemand, der mich dabei unterstützen will.

LG
Marcus

[arteco]

Hallo Marcus,

schau mal hier: https://knx-user-forum.de/351132-post13.html

Grüße
Tommy

[jensgulow]

Oder hier: https://knx-user-forum.de/366236-post46.html

[mclb]

Naja, leider nicht ganz das was ich mir vorgestellt hatte ... aber mal sehn, vielleicht kann ich da ja was draus machen. PHP liegt mir auch deutlich besser, als Javascript.

[mclb]

Hi,

nachdem mir die bisherigen Lösungen nicht unbedingt gefallen haben, hab ich das PHP-Script von jensgulow einfach mal verwendet, es ein wenig angepasst, dass es die Termine im json-Format ausgibt und diese dann über ein Plugin in die CometVisu lädt. Dabei hab ich mir viel vom rsslog-Plugin abgeschaut.

Der Vorteil, wie ich finde, dass sich die Daten nun nahtlos in meine Visu einfügen.

Ist jetzt nur mal ein erster Wurf, den Ansatz werd ich aber sicher weiter verfolgen, bis das so aussieht, wie ich das haben will.

Also jetzt mal gN8
Marcus

[mclb]

Sieht zwar aus, als wäre ich hier ziemlich alleine, dass ich meine Kalender einfach über ein Plugin in meine Visu integrieren möchte, dennoch schreib ich hier mal wieder einen aktuellen Stand.

An sich funktioniert das Plugin mittlerweile, die Konfiguration ist denkbar einfach:

      <plugin name="calendarList" />
...
	  <calendarList maxquantity="10" refresh="15">
	    <layout colspan="6" />
	    <calendar type="google" userid="<userid>" magiccokie="<magiccokie>" color="#4986e7">Marcus</calendar>
	    <calendar type="google" userid="<userid>" magiccokie="<magiccokie>" color="#fad165">Stefanie</calendar>
	    <calendar type="google" userid="<userid>" magiccokie="<magiccokie>" color="#16a765">Masami</calendar>
	    <calendar type="google" userid="<userid>" magiccokie="<magiccokie>" color="#16a765">Elay</calendar>
	    <calendar type="google" userid="<userid>" magiccokie="<magiccokie>" color="#cd74e6">Lichtenberger</calendar>
	    <calendar type="google" userid="<userid>" magiccokie="<magiccokie>" color="#7bd148">SaLi</calendar>
	    <calendar type="google" userid="<userid>" magiccokie="<magiccokie>" color="#b3dc6c">SaLiRa</calendar>
	    <calendar type="google" userid="<userid>" magiccokie="<magiccokie>" color="#9fc6e7">Jahrestage</calendar>
	    <calendar type="google" userid="<userid>" magiccokie="<magiccokie>" color="#cabdbf">Feiertage AT</calendar>
	  </calendarList>

Ich hab im Beispiel mal die User-IDs und Magic-Cokies herausgelöscht, die gehen halt niemanden was an.

Danach siehts dann so aus, wie im beigefügten Screenshot.

Ein bisschen Feinschliff noch und, falls gewünscht, check ichs auch gern ins Repository ein.
Evtl. bau ich dann später auch noch andere Kalendertypen ein (z.B.: Exchange). Dzt. gibts für type jedenfalls nur google (ist für uns einfach am wichtigsten).

LG
Marcus

[ZeitlerW]

Hallo Marcus,

ganz im Gegenteil . Ich freue mich schon den Kalender nutzen zu können.
vG
Wolfgang

[arteco]

Der Vorteil, wie ich finde, dass sich die Daten nun nahtlos in meine Visu einfügen.

prima - bin gespannt, wie es weitergeht - meine bisherige "einfache" Google-Lösung ist nämlich nicht wirklich zufriedenstellend, siehe Anlage

VG
Tommy

[mclb]

So, dann hier vorab mal die beiden Scripts, bei mir liegt alles im Verzeichnis plugins/calendarList.

calendarList.php (holt die Kalender-Einträge der Google-Kalender und vermantscht sie zu einer einzigen Liste -> Danke hier an jensgulow für die Vorarbeit)

 <?php
// Hier die GoogleKalender eintragen
// ReadCalendar(Userid, MagicCookie, Tage die abgerufen werden, ShortCut für farbige Sortierung)

if (isset($_POST['maxquantity'])) {
    $maxQuantity = $_POST['maxquantity'];
} else {
    $maxQuantity = 10;
}

// Kalender lesen
$types = '';
for ($x = 0; $x <= 100; $x++) {
    if (isset($_POST['type' . $x])) {
        if ($_POST['type' . $x] == 'google') {
            ReadCalendar($_POST['calendarname' . $x], $_POST['userid' . $x], $_POST['magiccokie' . $x], 30);
        }
    }
}

function DateCompare($a, $b)
{
    if ($a['Datum'] == $b['Datum'])
        return 0;
    if ($a['Datum'] < $b['Datum'])
        return -1;
    return 1;
}

function ReadCalendar($calendarName, $userid, $magicCookie, $maxDays)
{
    global $calcData;
    
    if ($magicCookie != '') {
        $feedURL = "http://www.google.com/calendar/feeds/$userid/private-$magicCookie/full";
        //echo $feedURL . "<br>";
    } else {
        $feedURL = "http://www.google.com/calendar/feeds/$userid/public/full";
        //echo $feedURL;
    }
    
    $feedParams = "?singleevents=true&max-results=20&orderby=starttime&start-min=" . urlencode(date("c", strtotime("today"))) . "&start-max=" . urlencode(date("c", strtotime("+" . $maxDays . " day"))) . "&sortorder=a";
    //echo $feedURL.$feedParams."<br>";
    $sxml       = simplexml_load_file($feedURL . $feedParams);
    
    $date = "";
    foreach ($sxml->entry as $entry) {
        $gd = $entry->children('http://schemas.google.com/g/2005');
        
        $startTime = '';
        $endTime   = '';
        if ($gd->when) {
            $startTime = $gd->when->attributes()->startTime;
            $endTime   = $gd->when->attributes()->endTime;
        } elseif ($gd->recurrence) {
            $startTime = $gd->recurrence->when->attributes()->startTime;
            $endTime   = $gd->recurrence->when->attributes()->endTime;
        }
        $startTime         = strtotime($startTime);
        $endTime           = strtotime($endTime);
        $thisData['Datum'] = $startTime;
        
        $thisData['DatumTxt']    = date("d.m.Y", $startTime);
        $thisData['EndDatumTxt'] = date("d.m.Y", $endTime);
        $thisData['ZeitTxt']     = date("H:i", $startTime);
        $thisData['EndZeitTxt']  = date("H:i", $endTime);
        $thisData['Bezeichnung'] = stripslashes(utf8_decode($entry->title));
        $thisData['Ort']         = utf8_decode($gd->where->attributes()->valueString);
        if ($thisData['ZeitTxt'] == "00:00" && $thisData['EndZeitTxt'] == "00:00")
            $thisData['EndDatumTxt'] = date("d.m.Y", strtotime($thisData['EndDatumTxt'] . "-1 day"));
        $thisData['calendarName'] = $calendarName;
        
        
        $calcData[count($calcData) + 1] = $thisData;
    }
}

usort($calcData, 'DateCompare');
$xml = '{"calendarList": { "calendarListEntries": [';
$row = 0;
foreach ($calcData as $thisData) {
    $row = $row + 1;
    if ($row <= $maxQuantity) {
        $xml .= '{';
        $xml .= '"StartDate": "' . $thisData['DatumTxt'] . '",';
        $xml .= '"EndDate": "' . $thisData['EndDatumTxt'] . '",';
        $xml .= '"StartTime": "' . $thisData['ZeitTxt'] . '",';
        $xml .= '"EndTime": "' . $thisData['EndZeitTxt'] . '",';
        $xml .= '"description": "' . htmlentities($thisData['Bezeichnung']) . '",';
        $xml .= '"where": "' . htmlentities($thisData['Ort']) . '",';
        $xml .= '"calendarName": "' . htmlentities($thisData['calendarName']) . '"';
        $xml .= '},';
    }
}
$xml = substr($xml, 0, -1);
$xml .= ']}}';
htmlentities($xml);
echo $xml;
?>

structure_plugin.js (Das Plugin an sich, das die Anzeige aufbaut)

VisuDesign_Custom.prototype.addCreator("calendarList", {
    create: function (element, path, flavour, type) {
        var $el = $(element);

        // create the main structure
        /*        var ret_val = basicdesign.createDefaultWidget( 'calendarList', $el, path, flavour, type, this.update, function( src, transform, mode, variant ) {
          return [ true, variant ];
        });     */

        function uniqid() {
            var newDate = new Date;
            return newDate.getTime();
        }
        var id = "calendarList_" + uniqid();

        var ret_val = $('<div class="widget clearfix calendarList" />');
        basicdesign.setWidgetLayout(ret_val, $el);
        basicdesign.makeWidgetLabel(ret_val, $el);

        var actor = $('<div class="actor calendarListBody"><div class="calendarList_inline" id="' + id + '"></div></div>');
        var calendarList = $("#" + id, actor);

        if ($el.attr("width")) {
            calendarList.css("width", $el.attr("width"));
        }
        if ($el.attr("height")) {
            calendarList.css("height", $el.attr("height"));
        }

        ret_val.append(actor);

        calendarList.data("src", "plugins/calendarList/calendarList.php");
        calendarList.data("maxquantity", $el.attr("maxquantity"));
        calendarList.data("refresh", $el.attr("refresh"));
        calendarList.data("calendar", $el.find('calendar'));

        templateEngine.bindActionForLoadingFinished(function () {
            refreshcalendarList(calendarList);
        });

        return ret_val;
    }
});

function refreshcalendarList(calendarList) {
    var calendarList = $(calendarList);

    var refresh = calendarList.data("refresh");
    var src = calendarList.data("src");
    var maxquantity = calendarList.data("maxquantity");
    var calendar = calendarList.data('calendar');

    $(function () {
        $(calendarList).calendarListlocal({
            src: src,
            maxquantity: maxquantity,
            calendar: calendar
        });
    });

    if (typeof (refresh) != "undefined" && refresh) {
        // reload regularly
        window.setTimeout(function (calendarList) {
            refreshcalendarList(calendarList)
        }, refresh * 1000 * 60, calendarList);
    }

    return false;
};

(function ($) {
    jQuery.fn.extend({
        calendarListlocal: function (options) {
            var defaults = {
                src: '',
                html: '<span>{date}: {text}{where}</span>',
                wrapper: 'li',
                dataType: 'json',
                datetime: true
            }
            var options = jQuery.extend(defaults, options);

            return this.each(function () {
                var o = options;
                var c = jQuery(this);

                if (o.src == '') {
                    console.log('calendarListlocal: no src URL');
                    return; // avoid the request
                }

                var formData = {
                    'maxquantity': o.maxquantity,
                };

                for (var i = 0; i < o.calendar.length; i++) {
                    var calendarname = 'calendarname' + i;
                    var type = 'type' + i;
                    var userid = 'userid' + i;
                    var magiccokie = 'magiccokie' + i;
                    formData[calendarname] = o.calendar[i].textContent;
                    formData[type] = o.calendar[i].getAttribute('type');
                    formData[userid] = o.calendar[i].getAttribute('userid');
                    formData[magiccokie] = o.calendar[i].getAttribute('magiccokie');
                }

                jQuery.ajax({
                    url: o.src,
                    type: 'POST',
                    data: formData,
                    dataType: o.dataType,
                    error: function (xhr, status, e) {
                        console.log('C: #%s, Error: %s, calendarList: %s', $(c).attr('id'), e, o.src);
                    },
                    success: function (result) {
                        c.html('');
                        var items = result.calendarList.calendarListEntries;
                        var itemnum = items.length;
                        var date = '';
                        var time = '';

                        var row = 'calendarListodd';
                        for (var i = 0; i < itemnum; i++) {
                            var item = items[i];
                            var itemHtml = o.html;

                            color = '#FFFFFF';
                            for (var ix = 0; ix < o.calendar.length; ix++) {
                                if (o.calendar[ix].textContent == item.calendarName) {
                                    color = o.calendar[ix].getAttribute('color') || '#FFFFFF';
                                }
                            }

                            date = item.StartDate + ', ' + item.StartTime;
                            if (item.StartDate != item.EndDate || item.StartTime != item.EndTime) {
                                date = date + ' - ';
                            }
                            if (item.StartDate != item.EndDate) {
                                date = date + item.EndDate + ', ' + item.EndTime;
                            } else {
                                if (item.StartTime != item.EndTime) {
                                    date = date + item.EndTime;
                                }
                            }

                            itemHtml = itemHtml.replace(/{text}/, item.description);
                            if (item.where != '') {
                                where = ' (' + item.where + ')';
                            } else {
                                where = item.where;
                            }
                            itemHtml = itemHtml.replace(/{where}/, where);
                            itemHtml = itemHtml.replace(/{date}/, date);
                            //console.log('%i: %s', i, itemHtml);

                            var $row = $('<span style="color:' + color + '">').append(itemHtml).append('</span><br>');
                            //console.log('%i: %s', i, $row);

                            c.append($row);

                            // Alternate row classes
                            row = (row == 'calendarListodd') ? 'calendarListeven' : 'calendarListodd';
                        }
                    }
                });
            });
        }
    });
})(jQuery);

templateEngine.pluginLoaded();

Ob das hier ganz optimal gelöst ist, weiß ich nicht. Bin kein Javascript-Entwickler, deshalb konnte ich nur zusammenkopieren und versuchen halbwegs zu verstehen, was da gemacht wird.

Zum Einbinden in die CometVisu fehlt dann nur noch:

<plugin name="calendarList" />
...
<calendarList maxquantity="10" refresh="15">
  <layout colspan="6" />
  <calendar type="google" userid="<userid>" magiccokie="<magiccokie>" color="#4986e7">Marcus</calendar>
  <calendar type="google" userid="<userid>" magiccokie="<magiccokie>" color="#fad165">Stefanie</calendar>
  ...
</calendarList>

Aber vorsicht, das PHP-Script kann maximal 100 Kalender ... sollte aber im realen Leben keine sonderliche Einschränkung sein.

Viel Spaß schon mal damit.

LG
Marcus

[jensgulow]

Sehr schön.

aber Marcus .... willst du wirklich allen hier Einblick in Deine Calendar ID's und magic-cookies geben?

[mclb]

Wo hab ich denn noch userids und magiccokies dri? Ich dachte ich habe überall raus genommen.

Gesendet von meinem Galaxy Nexus mit Tapatalk

[jensgulow]

Hier, oder sind das im php alles ausgedachte Kombinationen?

[Obiwan]

Tolle Arbeit.
hab bis jetzt auch den Kalender von Jens eingebunden.
Werd aber auch mal deine Altenative testen.
Wäre natürlich schön wenn so etwas in das Release wandert.

[mclb]

Hier, oder sind das im php alles ausgedachte Kombinationen?

Danke fürs aufmerksam machen, die hab ich total über sehen.

[mclb]

Wäre natürlich schön wenn so etwas in das Release wandert.

Aber nicht mehr 0.8.2, das geht sich nicht mehr aus. Vielleicht ja dann in 0.8.3, mal sehen. Wenns nach mir geht, werd ichs aber auf jeden Fall nach ein wenig Feintuning mal einchecken.