Enhance pat-calendar: allow setting of colours for events

[pysailor]

pat-calendar takes a list of events, each withing a <li>, in the context of <ul class="cal-events">, and turns them into elements in the calendar display.

pat-calendar already copies over the classes that are set on each <li> to the <a>. We now want to support the explicit setting of color and background-color via data attributes.

If present, the respective value should be set as style attribute on the <a>, the same tag that also receives the copied classes. If both are present, separated by semicolon.

New attributes and their mapping, each with an example value:

• data-background-color="example-color" => style="background-color: example-color"
• data-text-colour="#ffffff" => style="color: #ffffff"

Full markup example:

<li class="cal-event cal-open-market-committee cal-cat-open-market-committee editable"
    data-background-color="fuchsia"
    data-text-color="beige">
    <a href="/feedback/panel-edit-event.html#document-content" class="url external">
        <h4 class="title">
            Brainstorm session in the countryside 
        </h4>
        <p class="description">
                Lets free our minds in a nice environment outside the office space to brainstorm about our next campaign.
            </p>
        <ul class="details">
            <li>
                Starts <time class="start" datetime="2018-09-09T08:00+0000">2018-09-09T08:00Z</time>
                Ends <time class="end" datetime="2018-09-09T16:00+0000">2018-09-09T16:00Z</time>
            </li>
        </ul>
    </a>
</li>   

Should be turned into

<a 
    class="fc-day-grid-event fc-h-event fc-event fc-start fc-end cal-open-market-committee cal-cat-open-market-committee editable url external fc-draggable pat-tooltip inactive" 
    href="/feedback/panel-edit-event.html#document-content" 
    data-pat-tooltip="
        height: max;
        closing: close-button;
        source: ajax;
        class: event wizard;
    " 
    style="color: beige;background-color: fuchsia;">
        <div class="fc-content">
             <span class="fc-time">21:00</span> 
             <span class="fc-title">Brainstorm session in the countryside</span>
        </div>
</a>

(pat-calendar already produces that code, the only new thing is the handling of the 2 new data attributes.)

[cornae]

Spec looks great. If you give me a new Quaive bundle once it's done, then I can pick up the design work from there again.

[thet]

Technical recherche: The event object allows the definition of backgroundColor, borderColor, color (combination fo the latter two) and textColor. The values can be color names but also any other CSS color value and will be translated into CSS definition in a style attribute on the <a> element. See: https://fullcalendar.io/docs/v3/event-object