zabuto / calendar Goto Github PK

Good afternoon,
I try to adapt zabuto-calendar for my choral web site and I have a (big) problem. Heu, two : I am french and my english is sometime strange...

I have 3 types of rehearsal : ordinary, extra, and whole day rehearsal. there are also concerts. So I think I have to create 4 new event-types. OK. I would like to have 4 different colors but I am enable to write the correct lines in the css file. Yes, I am a newbie in HTML, CSS JavaScript...
I duplicate this section, changing event with extra-event, but I only obtain à red square, not a red badge.

/* actions and events */
div.zabuto_calendar .table tr td.extra-event div.day,
div.zabuto_calendar ul.legend li.extra-event {
background-color: red;
}
div.zabuto_calendar .extra-event,
div.zabuto_calendar div.legend span.extra-event {
background-color: red;
color: #ffffff;
text-shadow: none;
}

Could you help me ?
Best regards

When the user creates a event and save it to database, just refreshing the page isn't enough to update the calendar, because the browser keeps the cache after loading a month.

JQuery has a option to disable the cache - cache : false - and will be great if it's available through the ajax option on calendar initialization.

And taking the opportunity... is there a way to do a "refresh" in the calendar, i.e., do a new ajax call to reload the events from the current month with the updated ones from the database?

Is there an option to display full year, all 12 months, or specify how many months I'd like to view?

case 'tr':
return {
month_labels: ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"],
dow_labels: ["Pts", "Salı", "Çar", "Per", "Cuma", "Cts", "Paz"]
};
break;

current day badge is not shown if the day has an event ... need to fix that issue.

Until now, one can add only one date per day.
It would be really great if one could add multiple appointments and their time.

Hi,
Thanks for all efforts you have done on this. Just wondering if it is possible to restrict the Calendar to Only Current Year?

Thanks

Is there anyway to mark multiple days if the event's duration is more than one day?

Thank you in advance!

Dear developer, please enable the feature of disable date and datepick feature.

no npm for this project ?

I have tried using your calendar using ASP.NET instead of PHP but it seems that no matter how I tried I can't send the JSON expression to the ajax.
so please I would like you to inform me if it does have support for ASP.NET and I will write down my code if you have any tips for me

javascript

        $(document).ready(function () {
            $("#my-calendar").zabuto_calendar({
                language: "en", today: true, show_days: true, nav_icon: {
                    prev: '<i class="fa fa-chevron-circle-left"></i>',
                    next: '<i class="fa fa-chevron-circle-right"></i>'
                },
                ajax: {
                    url: "Default2.aspx/date",
                    modal: true,
                }
            });
        });

C#:

public static string date()
{
    JavaScriptSerializer js = new JavaScriptSerializer();
    Event event1 = new Event();
    event1.date = "2014-3-20";
    event1.badge = true;
    event1.title = "Event";
    event1.body = "body";
    event1.footer = "footer";
    event1.classname = "purple-event";
    return "[" + js.Serialize(event1) + "]";


}

Hi, Here is Slovak translation:

    case 'sk':
        return {
            month_labels: ["Január", "Február", "Marec", "Apríl", "Máj", "Jún", "Júl", "August", "September", "Október", "November", "December"],
            dow_labels: ["Po", "Ut", "St", "Št", "Pi", "So", "Ne"]
        };
        break;

And here is Hungarian:
case 'hu':
return {
month_labels: ["Január", "Február", "Március", "Április", "Május", "Június", "Július", "Augusztus", "Szeptember", "Október", "November", "December"],
dow_labels: ["Hé", "Ke", "Sze", "Cs", "Pé", "Szo", "Va"]
};
break;

Hi,

the default of zabuto calendar is YYYY/MM/DD. So, I want to change the date format.

can someone help with this action onclick will appear to 27/07/2016 (DD/MM/YYYY)

thanks

If the events changed in server, How to update the calendar ?

i have used this plugin and it works great but sometimes the calendar not rendered , it is not showing at all while the data exists , i can see the data in my console , can any one advise what to do ?

Hi is there a way to add new nav_icon to change year and not only month ?

Hello, these days, as i was working with the calendar i had to modify a piece of code so that i could add a custom class to the selected date. I didn't want to commit the changes on the repo because it may not be something you wanted, or i misunderstood it.

The original code is here:

// drawEvents function
...
if (typeof(value.badge) !== 'undefined' && value.badge !== false) {
    var badgeClass = (value.badge === true) ? '' : ' badge-' + value.badge;
    var dayLabel = $dayElement.data('day');
    $dayElement.html('<span class="badge badge-event' + badgeClass + '">' + dayLabel + '</span>');
}
...

The code seems to be able to take a class as a parameter ( besides true / false ) but the default class is also preserved, and may come in conflict with the one i supplied. ( default is orange and i want blue )

So i think it should look like this:

// drawEvents function
...
if (typeof(value.badge) !== 'undefined' && value.badge !== false) {
    var badgeClass = (value.badge === true) ? 'badge-event' : value.badge;
    var dayLabel = $dayElement.data('day');
    $dayElement.html('<span class="badge ' + badgeClass + '">' + dayLabel + '</span>');
}
...

Here is a fiddle i used for testing:
http://jsfiddle.net/1470bg5q/6/

You can also check and force a prefix to the class ( like 'badge-') but i think it might be confusing. People will add a class and expect that the same name will be used. Also they wont know the prefix until they search for it.

Hope this helps.

Hi!

I need to change the ajax url every time a element change. I'm trying to do: rutaAjax = [ create url with other variables ] $("#my-calendar").zabuto_calendar({ [ ... ] ajax: { url: rutaAjax } }); every time, but this don't change the url. The url is the same has the first time the calendar is created. Any idea ?

the drawCalendar function adds a duplicate id in line 60:
var $containerHtml = $('<div class="zabuto_calendar" id="' + $calendarElement.attr('id') + '"></div>');

I'm not a zabuto calendar expert but this looks unnecessary and triggers an error in our testing tools.

I'm using this configuration

    <script>
       $(document).ready(function () {
            $("#my_calendar").zabuto_calendar({
                language: "fr",
                today: true
           });
        });
    </script>

But special characters for Décembre displays wrong Décembre 2018). How to fix this ?

Hello, I setup calendar by config like this :

<div id="item-calendar"></div>
<script type="text/javascript">
    //<!--
            $(document).ready(function () {
            var eventData = [{"date":"2016-1-22","title":"2016-1-22","classname":"grade-2","badge":false},{"date":"2016-1-21","title":"2016-1-21","classname":"grade-2","badge":false},{"date":"2016-1-20","title":"2016-1-20","classname":"grade-2","badge":false},{"date":"2016-1-19","title":"2016-1-19","classname":"grade-2","badge":false},{"date":"2016-1-18","title":"2016-1-18","classname":"grade-2","badge":false},{"date":"2016-1-17","title":"2016-1-17","classname":"grade-2","badge":false},{"date":"2016-1-16","title":"2016-1-16","classname":"grade-2","badge":false},{"date":"2016-1-15","title":"2016-1-15","classname":"grade-2","badge":false},{"date":"2016-1-14","title":"2016-1-14","classname":"grade-2","badge":false},{"date":"2016-1-05","title":"2016-1-05","classname":"grade-2","badge":false},{"date":"2016-1-04","title":"2016-1-04","classname":"grade-2","badge":false},{"date":"2016-1-03","title":"2016-1-03","classname":"grade-2","badge":false},{"date":"2016-1-02","title":"2016-1-02","classname":"grade-2","badge":false},{"date":"2016-1-01","title":"2016-1-01","classname":"grade-2","badge":false},{"date":"2015-12-31","title":"2015-12-31","classname":"grade-2","badge":false},{"date":"2015-12-30","title":"2015-12-30","classname":"grade-2","badge":false}];
            var legendData = [
                {type: "block", label: "Booked", classname: "grade-1"},
                {type: "block", label: "Non Available/Closed", classname: "grade-2"},
                {type: "block", label: "Today", classname: "grade-today"},
            ];
            $("#item-calendar").zabuto_calendar({
                cell_border: true,
                today: true,
                weekstartson: 0,
                language: "en",
                show_previous: false,
                show_next: 12,
                data: eventData,
                legend: legendData,
            });
        });
    //-->
</script>

This month days picked on calendar but next month days not show , see this images please :

can you please help us to fix this problem? thanks

I created one container to receive the calendar, but it's overflowing over the border of the container. There's something that I'd do?

How to localize month names to my language?

Hi, I am a complete newbie so appreciate your help;
I saved a file with Json data
example calendar1.json
[{
"date": "2018-03-01",
"badge": true,
"title": "Tonight",
"body": "<p class="lead">Party</p>

Like it's 1999.</p>",
"footer": "At Paisley Park",
"classname": "purple-event"
}, {
"date": "2018-03-02",
"badge": true,
"title": "Tonight",
"body": "<p class="lead">Party</p>

Like it's 1999.</p>",
"footer": "At Paisley Park",
"classname": "purple-event"
}]

Now I try to pull this in modal using:-

How about every language has its own json file? No need to change the main .js everytime new languages is added. Like "en.json, es.json, fr.json" etc.. http://api.jquery.com/jquery.getjson/

Why with mmenu plugin the calendar change position?

Hi, please how can i dynamically load events from a MySQL Database?

Is there any way to use alert instead of modal because the theme i am using is not supported with bootstrap 3. and has some modal issues already.
so if possible to display event with alert message then let me know. its really urgent ...

I need to set the date passed on the url. http://forext.dev/blog-list?date=2019-02-01

If date is passed in the url set the calendar
$("#my-calendar").zabuto_calendar({
show_days: true,
today: true,
});

ie. if you want explicity to start on 1.1.2016.

year and month are given, but not day.

Can't install latest library (1.3) through bower.

Hi there,

Really enjoying this calendar, and the modal popup integration.

I have multiple events that fall on one date - but at the minute can only get one event to show in the modal.

Is it possible to change it so that days with multiple events open a new page rather than a modal window?

Best regards :)

Nick

Hi All,

I have the following script:

`<script type="application/javascript">
var eventData = [
{"date":"2015-01-01","badge":false,"title":"Example 1"},
{"date":"2015-01-02","badge":true,"title":"Example 2"}
];
$(document).ready(function () {
$("#my-calendar").zabuto_calendar({
data: eventData,
action: function () {
return myDateFunction(this.id);
}
});
});

function myDateFunction(id) {
var date = $("#" + id).data("date");
var hasEvent = $("#" + id).data("hasEvent");

// HOW TO GET VALUE OF "TITLE", ETC "EXAMPLE 1"

}
</script>`

My question is, how do we get the "title" value as we can obtain the value of "date" and "hasEvent"?

I have a problem in the view of an event for the day 29/02. Is there some setting to accept leap year?

thanks

Hi, I want to know if there is a way to listen event on lick of calendar-month-navigation please?
I can get alert on '.dow-clickable' but not Class: calendar-month-navigation or ID:zabuto_calendar_nav-prev
$('#zabutoCalendar').on('click','.dow-clickable',function(){
alert($(this).attr('id') +' '+ $(this).attr('data-time'));
});
$('#zabutoCalendar').on('click','

I'm double clicking the calendar to add an event and nothing happens. How should I work for your own github so that people can use this as their own version of calendar for Macintosh or Google calendar?

Hi,

I've created a function that fires off when I click on a date cell. The function will either add or remove an event for the selected date depending on whether an event already exists or not.

Is there a way to refresh the display to show this new state for each clicked cell?

Thanks
Duncs

Hi,

1. Wish I could disable weekends
2. Wish I could disable all the days before (or after) today

here is czech translation (cs)

case "cs":
      return {
        month_labels: ["Leden", "Únor", "Březen", "Duben", "Květen", "Červen", "Červenec", "Srpen", "Září", "Říjen", "Listopad", "Prosinec"],
        dow_labels: ["Po", "Út", "St", "Čt", "Pá", "So", "Ne"]
      };
      break;

I use a dark bootstrap theme. When the calendar is displayed, it uses its own css colours - which results in pretty much all white text on all white background.

Removing the colour references in the zabuto css file made it inherit all the bootstrap colours in my boostrap css, and all was good again.

Which makes me think that perhaps the default css should not have the basic background and text colours specified, the doc should be updated to tell the user which classes to override to colour in the special parts (eg the highlight and badge), and generally leave the rest to inherit from bootstrap.

Hello , First of all Thanks to developer for this calendar , My Issue is "How to send Current Month and Year with Ajax call ?? "
My mean is suppose Today is 2017-02-16 and if we navigate back means January than with ajax send that data,
ajax: {
url: "show_data.jsp?month=xxx,year=xxx",
modal: true
}

seems like the last commits are two years old and pull requests are not accepted.
@zabuto do you still maintain this project?

im going through the post add jquery and boostrap all set. but i cant show my calender

Hi,

really impressed with your calendar - it looks great and is easy to use.

I have a couple of questions though...

I pass data in a string using the data syntax and that works fine (it's read from a database). Now I intend having a context menu appear when you click on a date and this will allow you to set individual events. As I will need to populate these back to calendar (in a single instance) and then back to the database (for all events for a complete update) - I'd really appreciate if you can tell me how to:

 --  add a single event when there are already events in the calendar I don't wish to lose
 --  retrieve all the events from the calendar (so I can pass them back to the database) 

I don't expect you to write the code by the way - some pointers of how to get at this stuff would be great though

Many thanks

TSI

Is there a way to make weekends grey out without using the data option?

Ie. make all weekends have a specific class so it does not have to be included in ajax requests?

Scenario: disable click event late of today

You cannot do it using action_nav function if you navigate to previous month and go back.
what am i doing is move the drawtable function before action_nav function.

$prevMonthNav.click(function (e) {
      drawTable($calendarElement, $tableObj, prevYear, prevMonth);
 });

if (typeof($calendarElement.data('actionNavFunction')) === 'function') {
       $prevMonthNav.click($calendarElement.data('actionNavFunction'));
 }