paul-ds / bootstrap-year-calendar Goto Github PK

I'll use this great calendar slightly differently from the majority of people. I'll be using it to define prices, like daily rates for some service. Ie, the operator of the system may choose a period, like 1/1/2016 - 31/3/2016, and assign a price tag for the period. Then, 1/4/2016 - 21/8/2016 another price. So, my intention is to achieve any new period that has overlapping dates with a pre-existing period to replace the existing prices. So, for the example above, if he then defines a period, like 15/1/2016 - 10/2/2016 and assign another price, I want that price replace the other two ones that it overlaps. Is there an easy way to achieve that? Ie, maybe the getEventsOnRange could do some sick magic and do most of the dirty part for me? Or, does it need to get done the hard way, meaning by that that I have to perform all the if's within the saveEvent method myself? If it's the latter, is there a proven algorithm to use? Cause I'm afraid that I might miss a rare case that'll start producing bugs in the longterm?

Thanks in advance for your reply.
Kind regards,
and thanks a million for this great app.

Hello Paul,

Avant tout, merci beaucoup, ton calendar est exactement ce que je recherche. Malheureusement, je n'arrive même pas à générer un exemple en local. Je fus développeur, j'ai décroché un temps et là je m'y remets pour un projet perso.
J'ai bien télécharger ton package + bootstrap 3.3.7 + jquery 3.1.0

Cependant, quand je veux générer un calendrier grâce au JS "$('.calendar').calendar();", rien ne se produit alors que mes "alert" pop bien. Quand j'utilise les balises "

Je ne saisis pas ce que je fais mal.

Merci pour ton aide

Mathias

I had a look into the .js and found out that startDate and endDate properties are hardcoded, so I didn't those two (in fact I initially touched them, and the plugin stopped working). So, I renamed all needed properties to my needs for easier recognition, and left those two untouched. But then, I realized there is a problem when I right-click on a day to disply the context menu with Edit and Delete options. So I found that the "first-level" menu is hardcoded to events[i].name leaving my context menu empty (only with the right-pointing chevron arrow).

There a couple of workarounds here, like reverting back the rate property's name to name, or hardcoding into my saveEvent method a static property named name, some word obviously, like Actions, that will make sense as the "first-level" option in the context-menu. But to be honest, I'd prefer to totally omit the first level menu, so by right-clicking on a day will bring the two options. Is there a method for re-designing the context menu, or do I have to edit the source .js file?

Take a look at how it's displayed right now, and please advise me what's my best approach on this.

Its an awesome calendar. But Im having problems with october days. Every year, there is a day that is duplicate in october and it appears 30 days when should be 31 .I saw the same problem at your examples page. See the screenshot. Im using Firefox 49.0.1 and IE 11.

For debugging purpose while setting up the plugin, I use a temporary div whose html I update by the calendar's datasource. So, at first I was confused with the startDate and endDate 's shown in the datasource, but to my surprise they are depicted fine. So, is this intended behavior, or do I have to add one day to the starting and ending day of each period? My concern is when on the server-side I'll be storing those periods (haven't gotten there yet). How will PHP interpret those "startDate":"2015-12-31T22:00:00.000Z","endDate":"2016-01-30T22:00:00.000Z"
into the correct period which is 1/1/2016 - 31/1/2016?

Please, have a look at the image below to better understand what I mean:

hi, thanks for the plugin.
it's very useful for me.
i have one suggestion, i think we need add one method for reset data source.
but ignore it if not important..
thanks :)

I have detected an issue when setting startDate and endDate:
if the endDate day number is less than startDate (or currentDate) day number, the last month is not shown.
For example, see attached image

I have found a solution, just changing the condition checked before rendering each month.
In _renderBody function, the original condition is
while(momentCurrentDate < momentMaxDate)
I have changed it to:
var momentMaxDateEndOfMonth = momentMaxDate.endOf('month') while(momentCurrentDate < momentMaxDateEndOfMonth)

Hope it helps someone :)

Bonjour,

Bravo aussi pour ce bel outil !

Je recupere mes donnees d'une database et je ne sais pas formatter la date correctement pour qu'elle soit bien interpretee par le bootstrap-year-calendar.

Meme en mettant exactement au format "Tue Nov 17 2016 00:00:00 GMT+0200 (IST)", c'est interprete comme en String et non comme une date, et ca ne fonctionne pas...

Merci !

You could upload the index.html file?

Hey!

I'm trying to make it where I can pull events per a year instead of one call. I tried renderEnd which just causes an endless loop because I used the setDataSource (is there any other way to add events? I didn't see any in the documentation). customDataSourceRenderer works only on initial load. Is there a way to do it by year?

Thanks!

Polish translation for this great calendar :)

/**
 * Polish translation for bootstrap-year-calendar
 * Robert 'Wooya' Gaudyn
 */

;(function($){
    $.fn.calendar.dates['pl'] = {
        days: ["Niedziela", "Poniedziałek", "Wtorek", "Środa", "Czwartek", "Piatek", "Sobota"],
        daysShort: ["Nie", "Pon", "Wto", "Śro", "Czw", "Pią", "Sob"],
        daysMin: ["Ni", "Po", "Wt", "Śr", "Cz", "Pi", "So"],
        months: ["Styczeń", "Luty", "Marzec", "Kwiecień", "Maj", "Czerwiec", "Lipiec", "Sierpień", "Wrzesień", "Październik", "Listopad", "Grudzień"],
        monthsShort: ["Sty", "Lut", "Mar", "Kwi", "Maj", "Cze", "Lip", "Sie", "Wrz", "Paź", "Lis", "Gru"],
        weekShort: 'W',
        weekStart: 1
    };
}(jQuery));

Hello, exist an error in the plugin, i tried fix this error but couldn't, at least in Internet Explorer 9 and 11 this error happens. When rendering the month of October it always replicates one day in this month.

Is it possible to change the colours without manipulating bootstrap-year-calendar.js?

It would be very helpful 👍 :-)

I have initiated calendar for two different divs with two different class names with different MaxDate but upon adding the calendar to the div the other calendar also gets affected. for the moment i managed to fix this issue by destroying and creating calendar every time i want to use it. which is a bit inefficient . any suggestions !?

i also tried setting the max date by setMaxDate() but doesn't work

Hi all
Greet work with your calendar, I'm using it on a simple wordpress site.
[(https://www.lowveldescape.com/reservatie/?lang=en)]

Is there a feature planned for overlapping years? What I mean is that Can we set the current month of the current year as the top left month and start from their.
As I'm using it now, In December almost the whole calendar is disabled. If this is not a feature that is planned or already in progress, I'm willing to create this my self and give the result.

Bonjour,

Tout d'abord bravo pour le travail !
J'ai repris le code de cette page : http://www.bootstrap-year-calendar.com/test_krizajb/
Mais lorsque je le teste, les dates dans la modal sont au format MM/JJ/AAAA
Comment les passer en JJ/MM/AAAA

Et aussi est-il possible d'afficher uniquement 3 mois du calendrier ?
Le mois précédent, le mois en cours et le mois suivant ?

Merci d'avance pour le retour

I didn't find an option to display calendar (12 months) starting with specific Date, current month.

il y a un petit problème concernant sa quand je sélectionne une period l'affichage est sur le mois prochain
par exemple date début est 2016-10-12 et date fin est 2016-10-21
affichage sur l'agenda et 2016-11-12 et date fin est 2016-11-21
merci pour le plugine

Hi,
when i set the minDate and the maxDate for only showing a previous year, it still shows the actual year, but disabled (see picture 1). In the header it shows the actual year, the year I want and all years in between the actual and my year. When I click on my year, all other years disappear und everything is fine (see picture 2).

Is there any solution to solve this bug?

Thanks

Pic. 1:

Pic. 2:

Hi there!

I hope you are well.

I was wondering if you could let me know the best way to pass PHP data (from MySQL DB) to the dataSource parameter in the calendar object? Basically I have an array of date periods that I would like the calendar to display, but cannot get the calendar to take the data.

I have tried various methods but nothing seems to work.

Note: I have made sure that the time format is correct.

Is there an example somewhere of this plugin and PHP?

Not sure if anyone else needs this but popover implementation doesn't support user interaction. I somehow managed to make a workaround by additionally checking mouseenter/leave event on the popover arrow and bubble and assigned id to every day to properly show/hide the right popover on day hover.

Maybe it comes in handy to someone or you might consider adding additional functionality to your calendar :) Enjoy.

PS: My apologies for any indent inconvenience, no so much fun editing code from here :)

  // Popup animation control
  var inBubble = false;
  var inArrow = false;
  var inDay = false;

  // Assign to every day id for animation control
  var dayId = 0;
  var shownId = 0;

  $('.calendar').calendar({
  style: 'custom',
  customDataSourceRenderer: function(elt, currentDate, events) {
    elt.parent().attr('id', dayId++);
    /* Set other stuff, like background color etc for each day ...*/
  },

  mouseOnDay: function(e) {
    if(e.events.length > 0) {
      inDay = true;

      var content = '';
      for(var i in e.events) {
        content += '<div class="event-tooltip-content">'
          + 'popover tooltip content ...'
          + '</div>';
      }

      $(e.element).popover({ 
        trigger: 'manual',
        container: 'body',
        placement: 'bottom',
        html:true,
        content: content
     });
    //console.log("Day entered");

     if ($('div.popover:visible').length) {
       if (shownId != $(e.element).attr('id')) {
         //console.log("Hiding old one, poping new one");
         $('div.popover').hide();
         $(e.element).popover('show');
       }
      } else {
        //console.log("Poping new one");
        $(e.element).popover('show');
      }

      shownId = $(e.element).attr('id');
    }
  },

  mouseOutDay: function(e) {
    if(e.events.length > 0) {
      inDay = false;

      setTimeout(function() {
          if (!inBubble && !inArrow && !inDay) {
            $(e.element).popover('hide');
          }
        }, 350);


      $(".arrow").mouseenter(function(){
      //console.log("arrow mouse entered");
      inArrow = true;

      }).mouseleave(function(){
     //console.log("arrow mouse left");

      setTimeout(function() {
    if (!inBubble && !inDay) {
        $(e.element).popover('hide');
    }
      }, 10);

      inArrow = false; 
    });

    $(".popover").mouseenter(function(){
      //console.log("bubble mouse entered");
      inBubble = true;

    }).mouseleave(function(){
      //console.log("bubble mouse left");

           setTimeout(function() {
              if (!inArrow && !inDay) {
            $(e.element).popover('hide');
        }
      }, 10);

      inBubble = false;
    }); 
    }
  }
});

Bonjour Paul,

Quels sont les pré-requis pour utiliser ton plugin très prometteur ?
version de bootstrap mini ?
composants bootstrap (popover, ...) ?

Peux-tu fournir une page avec le code de base pour la page exemple complet ?

Merci beaucoup.

Manu

Certain mois ne contiennent pas le bon nombre de jours
ex : en 2015 le mois d’août n'a que 30 jours (en fr)

hi
how to open context menu?
right click?

I want to add events on the dataSource from a web serivce

@Paul-DS

$.getJSON( "URL" , function(data) {
         var i = 0;
          $.each( data, function( key, value ) {
     var ev = {}
        ev['id'] = i;
        ev['name'] = value.EVT_Title;
        ev['startDate'] =new Date(value.EVT_Date);
        ev['location'] = value.EVT_Title;
        ev['endDate'] = new Date(value.EVT_Date)    ;
        ev['endDate'] = ev['startDate'].addDays(1); 
        eventOfJson.push(ev);

        i = i+1;

This is my code to get events from a web service , the statDate and the endDate are equals for example the startDate is ( 04/01/2016 ) but the event appears at the end ( 05/01/2016 ) like the endDate add + 1day
what should i do please `

Vraiment bien, je vais certainement l'utiliser prochainement.

1. Le titre de la colonne des n° de semaines n'est pas traduit ("W" en français).
2. Sur l'exemple des n° de semaine (http://www.bootstrap-year-calendar.com/#Examples/Weeks number), il me semble que les 3 premières lignes de la fonction sont inutiles.
3. Tous les exemples sont sur 2015, or depuis peu le calendrier apparaît sur 2016. Ça serait bien de mettre les exemples sur 2016.

I have the calendar at the bottom of a long page, when you click next / previous buttons it moves the view point further up the page and the calendar is no longer visible without scrolling back down.

Thanks for the great plugin!

Hey @Paul-DS,

how would you go about starting each week of the month with Monday instead of Sunday? There seems to be no API/option for this.

I think, that ability to install this great calendar via JS package managers is very necessary.

Hello,

when i add a timeframe to the datasource, i have to put in a different month number, than the month actually has.

Example:

Vacation from Oct, 27th till Nov, 10th.
Date: 27.10.2016 till 10.11.2016

Datasource entry:

dataSource: [
    {
        id: 0,
        name: 'Vacation',
        startDate: new Date(2016, **09**, 27),
        endDate: new Date(2016, **10**, 10)
    }
]

thats counterintuitive and leads to errors for users with less programming experience.

Hi, I adjusted this Script to accept Timestamps and handle times which are not exactly 0:00 o´clock:

Here is the part of my _renderDataSource:

var firstDate = new Date(_this.options.startYear, month, 1);
var lastDate = new Date(_this.options.startYear, month + 1, 0);

if((_this.options.minDate == null || lastDate >= _this.options.minDate) && (_this.options.maxDate == null || firstDate <= _this.options.maxDate))
{
    var monthData = [];

    for(var i in _this.options.dataSource) {
        if(!(_this.options.dataSource[i].startDate instanceof Date)){
            _this.options.dataSource[i].startDate = new Date(_this.options.dataSource[i].startDate);
        }
        if(!(_this.options.dataSource[i].endDate instanceof Date)){
            _this.options.dataSource[i].endDate = new Date(_this.options.dataSource[i].endDate);
        }
        if(!(_this.options.dataSource[i].startDate > lastDate) || (_this.options.dataSource[i].endDate < firstDate)) {
            monthData.push(_this.options.dataSource[i]);
        }
    }

    if(monthData.length > 0) {
        $(this).find('.day-content').each(function() {
            var currentDate = new Date(_this.options.startYear, month, $(this).text());
            var nextDate = new Date(currentDate.getTime());
            nextDate = new Date(nextDate.setDate(currentDate.getDate()+1));

            var dayData = [];

            if((_this.options.minDate == null || currentDate >= _this.options.minDate) && (_this.options.maxDate == null || currentDate <= _this.options.maxDate))
            {
                for(var i in monthData) {
                    if(monthData[i].startDate >= currentDate && monthData[i].endDate <= nextDate) {
                        dayData.push(monthData[i]);
                    }
                }
                if(dayData.length > 0)
                {
                    _this._renderDataSourceDay($(this), currentDate, dayData);
                }
            }
        });
    }
}

getEvents has to be adjusted as well. Else you will not get popovers:

getEvents: function(date) {
    var events = [];
    var nextDate = new Date(date.getTime());
    nextDate = new Date(nextDate.setDate(date.getDate()+1));
    if(this.options.dataSource && date) {
        for(var i in this.options.dataSource) {
            if(this.options.dataSource[i].startDate >= date && this.options.dataSource[i].endDate <= nextDate) {
                events.push(this.options.dataSource[i]);
            }
        }
    }

    return events;
},

is it possible change background without manipulating bootstrap-year-calendar.js? just like color?

The days are not visible on Firefox 42.0 (Yosemite 10.10)

Hi!
I've noticed an issue with border rendering in _renderDataSourceDayfunction. There's a line 373:

for (var i in events)

it causes strange behavior in Chrome 51.0.2704.103 m - borders aren't rendered:

and boxShadowresult looks like below:

inset 0 -4px 0 0 #45A597,inset 0 -NaNpx 0 0 undefined,inset 0 -NaNpx 0 0 undefined,inset 0 -NaNpx 0 0 undefined

When I've changed line 373 to:

for (var i = 0; i < events.length; i++)

then calendar's borders are rendered correctly:

Is it possible to add a parameters that disabled all saturday and sunday of the years?
I find it too :
line 261
if(j==6 || j==5){
cell.addClass('disabled');
}

In more, if I disabled week-end and I have an event including week end, don't color day like this :

I find with css :
.disabled{
box-shadow: none !important;
}

Great Job, I love it !

I'm trying to edit my event by right click , It's working on windows perfectly but not working on mac or linux.(I have to hold right click and then left click on edit link.) . how can i solve?

If I enable alwaysHalfDay, it works fine on Dektops and Tablets.
In Firefox for Android, it is working too.
But in the build-in android Browser (version 6.0.798481) it looks like fullDay. (See picture) Any Idea?

Popup is not working

Is there a way to break line to 50% if the last or the first day of event is a half day like this :
I add a parameter like
first-day : "morning", "afternoon", "all_day";
last-day : "morning", "afternoon", "all_day";

Bonjour,

J'ai un petit problème ou alors je ne comprend pas bien ...
Voici un exemple de mon dataSource (champ mysql de type date ):

dataSource: [ {startDate: new Date(2016,07,02
),endDate: new Date(2016,07,02)},{startDate: new Date(2016,07,28),endDate: new Date(2016,07,28)} ]

lors du l’affichage , j’ai un mois de décalage : ( 2016-07-28 ==> Juillet / Affichage ==> Aout)

Merci par avance de votre aide :)

Cordialement ,

HI. . .
Thanks for awesome plugin.
I have problem to show calender in year 2016-2017 interval Aug 2016 - Aug 2017, Can you tell me how to make it ?

I read documentation but couldn't find this option. How can I set Monday as a first day of week instead of Sunday?

how could I get data source elements on event selectRange? because there's just two parameters on event selectRange (startDate and endDate).

in 30 and 31 days only just the name appear when mouse on but the color not rendered

How can i select time of date in Calendar

please advise me thank you

Hello Paul,

First of all I want to thank you for creating such a useful widget.

I am developing a web project using ASP.NET MVC C#. All working fine but I am facing an issue. It may be because of my mistake but I really need to complete it today. Please help me with this.

My dataSource is binding, I am able to load the details on "mouseOnDay" but the style to set color on dates is not applying. After debug I found out that at the time of "this._initializeDatasourceColors();" the dataSource is on binding in calendar's options. Rest options are passing perfectly (startYear, allowOverlap, enableRangeSelection etc).

Here is what I am doing to fetch the data :

 function getMyData() {

            var myData= [];
            $.ajax({
                url: 'Index/holiday',
                success: function (response) {
                    for (var i = 0; i < response.length; i++) {
                        myData.push({
                            id: response[i].id,
                            title: response[i].title,
                            startDate: new Date(response[i].startDate),
                            endDate: new Date(response[i].endDate),
                           color: response[i].color,
                        });
                    }

                }
            });
            return myData;
        }

 var calendar = $('#calendar').calendar({
                dataSource: getMyData(),
                startYear: 2016,
                allowOverlap: true,
                enableRangeSelection: true,
                mouseOnDay: function (e) {
                    if (e.events.length > 0) {
                        var content = '';

                        for (var i in e.events) {
                            content += '<div class="event-tooltip-content">'
                                            + '<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].name + '</div>'   +'</div>';
                        }

                        $(e.element).popover({
                            trigger: 'manual',
                            container: 'body',
                            html: true,
                            content: content
                        });

                        $(e.element).popover('show');
                    }
                },
                mouseOutDay: function (e) {
                    if (e.events.length > 0) {
                        $(e.element).popover('hide');
                    }
                },
                dayContextMenu: function (e) {
                    $(e.element).popover('hide');
                }

            });

        });

This is not the only binding method I used, I used many but still facing the same issue. Please help and guide.

Is there a way to see only one month in big size like a zoom ?

I like this plugin, I want to use it in angular project. Can you tell me if you have angular module for this plugin

Hi,
When I try to use the setDataSource method with a JSON $.post response, I cannot set the startDate / endDate in string format.
Must I alway JSON.parse() the string date before setting datasource to instanciate a new Date() ?
Thank's for your help ! :)