Feature requests - Githubissues

Thanks for this great, light calendar. I am using it with a Hugo website, and have applied a few hacks to simplify my use case. One or two of these might be useful to incorporate in a future version... :)

I am forcing the view depending on the viewport being used: week for mobile devices, month for desktop. I hide the selector, since the month view really doesn't server me well on a phone. I am choosing viewport using window.innerWidth >= something.
Since I hide the view options using display:none, I push the title with float:left -- that's useful especially in handheld.
vertical space is limited, and the Week and day modes overrun my next div. I am using javascript to hide all weekdays that have no content, and rerun the code on render:

calendar.on('rendered', calendarRestate);
calendarRestate = function() {
    if (!desk) {
        // remove empty days
        [...document.getElementsByClassName("col-week-day-container")].forEach(function(e) {
            if (!e.querySelector(".cal-week-day-event-col")) {
                e.style.display = 'none';
                e.previousSibling.style.display = 'none';
            };
        });
    };
};

I've employed a few css hacks as well, most importantly resizing the calendar widget as a whole to 100%... for some reason, in my inherited website, the responsive option wasn't playing well (likely a problem with my page grid classes...). I put the coloring into my LESS file so I could easily use a color-picker ... not necessary but helpful in VsCode (actually, no good for multiple colors, so I am reverting that). I also added a COLOR attrib so that I could go with lighter backgrounds.
```
.js-calendar { 
width: 100%;

.control-bar {
    &-views { display: none; }
    &-title { float: left;}
}

.calendar-wrapper {
    width: 100%;

    .cell-event-mark, .cal-week-day-event-col {
        color: black;
        background: rgba(222, 255, 190, 0.6) none repeat scroll 0% 0% !important; // overrides eventBackground param
    }
    .cal-week-day-time-float {
        color: rgb(32, 70, 70);
        font-weight: 500;
    }
}
}
```
A hugo site, I will need to easily and manually add events. I decided to go with a JS file and simplified format, that I later pull into your matrix via javascript. I added a "repeat" days during a given month -- I don't need the crazy repeating capability that major calendaring systems have. Those days are added to the initil, and new events generated runtime. I like how that works! I also need i18n resources, so I preload language specs, and pull them into your vocab parameters based on the language element of my URL:
```
activities.js
```

// add new events to the top of the list var events = [ { d:"2018-09-15 08:30", h:"8.5", r:"29", n:"Day of Mindfulness", c:"", l:"/pages/dayofmindfulness" }, { d:"2018-09-05 17:30", h:"2.5", r:"12,19,26", n:"Meditation", c:"", l:"/practices/practice" } ];

// js language resources var buttons = {}; buttons['en'] = { previous: "previous", today: "TODAY", next: "next" }; buttons['ca'] = { previous: "anterior", today: "AVUI", next: "pròxim" }; buttons['es'] = { previous: "anterior", today: "HOY", next: "próximo" };

var days = {}; days['en'] = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; days['ca'] = ["Diumenge", "Dilluns", "Dimarts", "Dimecres", "Dijous", "Divendres", "Disabtes"]; days['es'] = ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"];

var months = {}; months['en'] = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; months['ca'] = ["Gener", "Fevrer", "Març", "Abril", "Maig", "Juny", "Juliol", "Agost", "Setembre", "Octubre", "Novembre", "Desembre"]; months['es'] = ["Enero", "Fevrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];

all of that is pulled into your matrix format prior to calendar rendering:

// calendar activation
var matrix = {};
events.forEach(function(e) {
    var dt = new Date(e.d),
        yr = dt.getFullYear(),
        mo = dt.getMonth(),
        dy = dt.getDate().toString(),
        hr = dt.getHours(),
        tm = dt.getTime();

    // process repeating days
    (dy + (e.r ? "," + e.r : "")).split(',').forEach(function(d) {
        // instantiate matrix elements if required
        if (!matrix[yr]) matrix[yr] = {};
        if (!matrix[yr][mo]) matrix[yr][mo] = {};
        if (!matrix[yr][mo][d]) matrix[yr][mo][d] = [];

        // add event to matrix
        var ev = { };
        if (e.n) ev.displayname = e.n;
        if (hr) ev.at = tm;
        if (e.h) ev.duration = parseInt(e.h) * 60 * 60 * 1000; // hours * minutes * seconds * milliseconds
        if (e.c) ev.color = e.c;

        matrix[yr][mo][d].push(ev);
    });
});


The last thing on my list is the ability to add more detail for flyover and linking, so those attributes are in my source arrays. I'd like to push them into the individual elements using data- strings, so that I can generate flyover dialogs using js. I bet I have to drop into your library for that one, though :)

Thanks for the work!

rykdesjardins / js-calendar

Feature requests #11