jQuery Event Calendar Plugin – english version

I’m trully glad to publish today my first jQuery plugin. It has taken a big amount of hours of hard work, but as long as I see the results, I realize that it has all been worth it.

DEMO Page / jQuery Event Calendar Plugin examples | jQuery Event Calendar Plugin download

Introduction


jQuery Event Calendar Plugin is another plugin to show events in a calendar directly in your web app.

The presentation of the events is made in a really comfortable way, as long as you can see all the following events at eyesight, or just a particular date event (displaying the whole month or just a day).

This widget shows the current day and all the other days that have events scheduled.

So… just another calendar plugin

Well, it is, but it also goes far beyond.

There are several jQuery plugins to visionate and manage calendars and events:

But… even when we had done a great research, none of them adjusted with the needs that we have in our projects, and if they did, they were prepaid plugins that we couldn’t nor wanted to use in our OpenSource projects.

In particular, this plugin has been created for an OpenSource project that we are developing in  Paradigma Tecnológico for agile project management using Scrum, a project I’ll show you in a very short period of time.

Also, it has been develop for responsive design, so you can work fine with it in desktop, tablet and even smartPhones

How does it work?

The first thing we have to know is how the plugin recieves the events. There are some methods to communicate between the plugin and the events, but in all cases the information has to be represented as a json with the following structure:

The plugin is highly customizable, so you are able to modify it through these parameters:

  • Send the json to the plugin in an inline JavaScript function or on an extern file.
  • Cache the received events or make new calls on every date change.
  • Change the calendar size to every width we need (it is 100% responsive, it is 100% fluid)
  • Supports all languages
  • Limit the number of events to show
  • Weeks start on Sundays or Mondays
  • Show the days in a calendar view, by weeks or all the month in a single line
  • Show the event description, or not
  • Open the event links in a new window, or not
  • Change the velocity of the animation when changing dates
  • Show the events inside a panel with scroll to avoid the widget from changing its size

We encourage you to visit the demo page of the plugin to see all its posibilities in action, and the explanation of each parameter that has been used.

And, if you like it, don’t doubt on downloading the plugin

And now, what?

I’m thinking on improving the plugin, so any kind of bugs you find on it will be highly welcomed.

Following tasks:

  • timeago integration
  • Make the plugin 100% responsive: addapt to its content as it already does, but also to the browser size changes. Already done

136 comentarios

  1. Raj dice:

    Hi There,
    i want to integrate your plaugin into my application.

    I just want to know what is the date format?
    I am using .net application and i have DateTime type for datetime so how i can convert that .net DateTime to your date string format?

  2. montasser dice:

    how can i use php file to get data?

    • jaimefdez dice:

      Hello, At this moment plugin only can get events data from a json file. I’m improving the plugin to be able to get data from a HTML list, but it is not ready yet. Sorry for inconveniences.

  3. jaimefdez dice:

    Hello, my PHP version is also PHP 5 (5.3.10).

    I’ve load your page with Google Web Developer Tools, and the problem looks like the json path is not valid. Your page tries to get the json from «http://www.tulkarm-chamber.org/eventcalendar/json/events.json», but if you write this URL on your browser you get a 404 error (file doesn’t exist). Are you sure that your json file is in that path?

    Thanks for using the plugin and tell me if you can fix the problem

  4. Malinda dice:

    thanks for sharing this.. i want to change the event days color as user define (through the admin panel user can define the color for that day) is it possible?

    • Jaime Fernández dice:

      Hi, this is possible, always that the user change the color to all the days with events, not to one expecific day.

      Now this color is set on CSS:
      .eventsCalendar-daysList li.dayWithEvents a {}
      li.eventsCalendar-day.dayWithEvents a:hover {}

      You’ll have to overwrite this CSS properties with the data of the user admin panel.

      • Malinda dice:

        hi thanks i manage to do with it json data I pass another data as color and set that color for the event day.. seems its working fine ..
        Thanks

        • Daniel dice:

          Hi Malinda, could you please share how you managed to change the color based on the Json. I am working on that same, that would be very helpful.

          Thank you

  5. Malinda dice:

    i select date like 31/8/2012 and pass the timestamp but is does not show the event .please help

    • I’m not sure about your question. I undestand that you create a new event, and your new timestamp dosen’t work, is that the problem?
      If this is what is happening to you, try to add 000 at the end of the timestamp. Compare your timestamp with the ones of the example json. Y the example json timestamp has more numbers, then that is the problem. Timestamp in javascript are bigger than in other languages. I don’t know the reason.

  6. montasser dice:

    i would like to say that i could use php file instead of json file.
    now i get events from database using php, this is exactly what i need.
    the php file provided with the plugin is very useful.
    thank you.

    • Nani dice:

      I would like to know could you do it using PHP & mysql to trigger events, I have tried lot to do it but it was not taking any event.

  7. grasnal dice:

    Hi Jaime! Is it possible to display 2 or more months in one view and scroll them by this number?

  8. azam dice:

    hello
    i want jQuery Event Calendar Plugin but I canot download it.please help me.
    please send this plugin to my email.
    thank you

  9. Malinda dice:

    can we show the year/month select dropdown to navigate through years and months

  10. blah dice:

    How do I resize this calendar more easily?

    • Jaime Fernández dice:

      You don’t have to resize it. It use the content of te parent DIV.

      • Daniel dice:

        Hi guys, great calendar, I just love it.
        One question, the calendar does not fill in the whole webpage, how could I strech it so that it fills the whole web site. I just want to increase the height.
        Another thing, how could I increase the size of the calendar numbers.

        Thank you.

  11. johnny dice:

    I have problems in IE9 and IE7 , even viewing your own demo page
    http://www.vissit.com/projects/eventCalendar/

    the problem is with the layout of the days in the calendar.

    • johnny dice:

      to clarify some more, august 6th 2012 should be a monday, but on your calendar it shows as Wednesday.
      It appears to be a CSS issue, where the element is not floating left properly.

      • Jaime Fernández dice:

        I think it must be fixed with new version. Thanks!

        • Jaime Fernández dice:

          Sorry, but i have no idea about release date of the new version.

        • triagency dice:

          what it seems to me is happening, is that the height of the empty days is not the same as the height of the calendar days. in my case the empty cells were 29px height, and the days themselves were 27px high. this is causing the days on the row below the empty cells to not be able to clear the height of those so it is pushed over to the right. in order to quickly fix this i changed the following in my own site CSS and it now works!

          .showAsWeek .eventsCalendar-day {height: 30px; }
          .showAsWeek .eventsCalendar-day.empty {height: 30px;}
          .eventsCalendar-daysList.showAsWeek li {height: 30px;}
          .eventsCalendar-daysList.showAsWeek {height: 30px;}

    • johnny dice:

      also in IE, the background does not have the nice metallic fade effect.

      • Jaime Fernández dice:

        Ofcourse not, because those nice background are made with CSS3, and old IE don’t support it. You can replace them with background images if you want to improve browser support

    • Jaime Fernández dice:

      I test it on IE8 and looks fine. Thanks for your comment

  12. Ezequiel dice:

    Estimados: Quiero utilizar este calendario pero de forma offline. Que archivo debo modificar y que permisos aplicar? No puedo conseguir el html area, en donde ponerlo en una pagina php o html

    • Jaime Fernández dice:

      a que te refieres con una forma offline, ¿en un servidor local?. Si es así no tendrás problema. De lo contrari tampoco creo que tengas problema si utilizas la llamada al json inline. Si no te funciona dime exactamente que error te da, e intentaré ayudarte a configurarlo.

      • Ezequiel dice:

        No es que me da error. Solo que no se como hacerlo. Debo crear un archivo html o php con permiso de escritura? Lo quiero hacer en un directorio y abrir el html y ahi empezar a cargar los eventos en el calendario. No se como hacerlo. Ya que el index que viene esta igual que en esta pagina. Realmente no se como hacerlo. Gracias!!!!

  13. Olivier dice:

    Hello,
    Thanks for the pluggin. Here I post a php for retreive informations from google calendar. You need to install GDate Zend library.
    Only one question. How is it possible to display more informations like start time and end time, make link to the google calendar localization in the event detail?
    Thanks .
    Olivier
    The code
    newEventQuery();
    $query->setUser($calendar);
    $query->setVisibility(‘public’);
    $query->setProjection(‘full’);
    $query->setStartMin(date(«Y-m-d»));
    $query->setStartMin(date(‘Y-m-d’, strtotime(«-6 months»)));
    $query->setStartMax(date(‘Y-m-d’, strtotime(«+1 months»)));

    // get and parse calendar feed
    // print output
    try {
    $feed = $gcal->getCalendarEventFeed($query);
    } catch (Zend_Gdata_App_Exception $e) {
    echo «Error: » . $e->getResponse();
    }

    foreach ($feed as $event)
    {
    $starttmp = date_google_to_timestamp(stripslashes($event->when[0]->startTime));
    $endtime = date_google_to_time(stripslashes($event->when[0]->endTime));
    $starttime = date_google_to_time(stripslashes($event->when[0]->startTime));
    $startdate = date_google_to_date($event->when[0]->startTime);
    $link = «admin.php?action=inscripcio&locale=ca&data=$startdate&type=$event->title»;
    echo $separator;
    echo ‘ { «date»: «‘; echo $starttmp .»000″ ; echo ‘», «type»:» Formació», «title»: «‘; echo $event->title ; echo ‘», «description»: «‘; echo $event->title . «Horari » . $starttime . » – » . $endtime . «Lloc » . $event->where[0]; echo ‘», «url»: «‘ . $link .'» }’;
    $separator = «,»;
    }
    echo ‘]’;
    ?>

    • Jaime Fernández dice:

      hi, of course you can add more info to the envents. You have to create new fields in json file, and edit js file to receive them and show them.

    • Andy dice:

      How would you define multiple days for a single event? Without being able to do so this plugin is useless???

      • Jaime Fernández dice:

        With this version of the plugin it is not posible. I’ll think about it for the new version, because I think it is a great idea.

    • Olivier dice:

      Hello, I send the full source to use event calendar with gmail connexion.
      only put the start/end php tag.

      require_once ‘Zend/Loader.php’;
      header(‘Content-type: text/json’);
      function date_google_to_timestamp($str)
      {
      $t = explode(‘T’, $str);
      $date = $t[0];
      $time = $t[1];
      $time = substr($time, 0, 8);
      $str = $date . ‘ ‘ . $time;
      $str = strtotime(trim($str));
      return $str;
      }
      function date_google_to_time($str)
      {
      $t = explode(‘T’, $str);

      $time = $t[1];
      $time = substr($time, 0, 5);
      return $time;
      }
      function date_google_to_date($str)
      {
      $t = explode(‘T’, $str);
      $date = $t[0];
      return $date;
      }
      echo ‘[‘;
      $separator = «»;
      Zend_Loader::loadClass(‘Zend_Gdata’);
      Zend_Loader::loadClass(‘Zend_Gdata_ClientLogin’);
      Zend_Loader::loadClass(‘Zend_Gdata_Calendar’);
      Zend_Loader::loadClass(‘Zend_Http_Client’);

      // create authenticated HTTP client for Calendar service
      $gcal = Zend_Gdata_Calendar::AUTH_SERVICE_NAME;
      $user = «here your user name»;
      $pass = «here your password»;
      $calendar = «here your calendar»;
      $client = Zend_Gdata_ClientLogin::getHttpClient($user, $pass, $gcal);
      $gcal = new Zend_Gdata_Calendar($client);
      // generate query to get event list
      $query = $gcal->newEventQuery();
      $query->setUser($calendar);
      $query->setVisibility(‘public’);
      $query->setProjection(‘full’);
      $query->setStartMin(date(«Y-m-d»));
      $query->setStartMin(date(‘Y-m-d’, strtotime(«-6 months»)));
      $query->setStartMax(date(‘Y-m-d’, strtotime(«+1 months»)));

      // get and parse calendar feed
      // print output
      try {
      $feed = $gcal->getCalendarEventFeed($query);
      } catch (Zend_Gdata_App_Exception $e) {
      echo «Error: » . $e->getResponse();
      }

      foreach ($feed as $event)
      {
      $starttmp = date_google_to_timestamp(stripslashes($event->when[0]->startTime));
      $endtime = date_google_to_time(stripslashes($event->when[0]->endTime));
      $starttime = date_google_to_time(stripslashes($event->when[0]->startTime));
      $startdate = date_google_to_date($event->when[0]->startTime);
      $link = «admin.php?action=inscripcio&locale=ca&data=$startdate&type=$event->title»;
      echo $separator;
      echo ‘ { «date»: «‘; echo $starttmp .»000″ ; echo ‘», «type»:» Formació», «title»: «‘; echo $event->title ; echo ‘», «description»: «‘; echo $event->title . «Horari » . $starttime . » – » . $endtime . «Lloc » . $event->where[0]; echo ‘», «url»: «‘ . $link .'» }’;
      $separator = «,»;
      }
      echo ‘]’;

      • Jaime Fernández dice:

        Amazing! thanks a lot.

      • Chris dice:

        Hi, I’m really interested in linking my Google Calendar with this plugin but I’m unsure how to do so.

        I’ve replaced the contents of events.json.php with the above code and have the Zend library in place but I get the «error getting json: json/events.json.php».

        Am I missing a step?

        Your help is much appreciated.

        Chris

        • Jaime Fernández dice:

          Sorry, but I didn’t develop that Zend extension. I will try to integrate on next version, but I can’t promise you anything.

          • Chris dice:

            Hi Jamie,

            Sorry, I understand that you didn’t implement that but I hoped Olivier may re-visit this page and explain how a little bit more.

            Thanks.

  14. jose carlos dice:

    La verdad es muy bonita herramienta ya estoy intentando insertar eventos con consultas de mysql,,,pero aun no le encuentro la forma de que me reconosca la fecha,,,,una ayudita xfa,,,y muchas gracias,,,,

    • Jaime Fernández dice:

      Tienes que mostrarlo en formato TIMESTAMP, y añadirle al final 000 para convertirlo en formato Timestamp de Javascript

      • Jose carlos dice:

        ok,,,,,,esta muy bien,,,,,,perdon,,,,,,en que lugar puedo modificar el tamaño del calendar sin dañar parte de ella,,,,

        • Jaime Fernández dice:

          El calendario se adapta al tamaño de su contenedor (es responsive). Si quieres ponerle un tamaño determinado, ponle un ancho por CSS al div que contenga al calendario.

  15. Csaba dice:

    Hello,
    Thanks for the pluggin.
    Please write, how do remove the Ordinal Numbers english shorts (-st, -nd- th,) from the .

    • Jaime Fernández dice:

      Comment the function «num_abbrev_str» if you want to remove de -st, -nd,… from the date

      • Tiberio dice:

        Hi, I tried that and it didn’t work. Finaly got it working by doing this:
        return num /* + abbrev */ (commenting the abbrev). Remember to change he order in the function return num/* + abbrev */

  16. Husain Hakim dice:

    Hi, is it possible to not allow the user to navigate to months, if no events exist?

  17. cagri dice:

    is it possible to show events in different div that i placed somewhere else? BTW great script. thx

    • Jaime Fernández dice:

      Yes, it is possible, that you will need to change things in the core of the plugin. I’ll try to make it easier on new version

  18. Stephano dice:

    How to change white background, to any color?

  19. Stephano dice:

    Thanks, solved (event calendar theme responsice, eventCalendar-wrap, bckground color)

  20. Kevin dice:

    Thansk for the plugin. I have noticed that if the eventsLimit is set to 0, the first time the calendar is displayed, it shows ALL events and is not filtered to the current month, but if I then click to another month the events are correctly filtered for that month. Am I doing something wrong?

    • Jaime Fernández dice:

      No, you are doing it right. This is the default behaviour of the plugin. I think that first time you load it, you are interested in see your X next events (no matter the date), you can see the plugin on day 30th of the month, and you’ll be able to see the X first events of next month, with out the need of click in that month. In the case that you click on a specific month, then it is because you want to see only the events of that mont (or day). I think this is a good behaviour. Thanks for your comment

      • Kevin dice:

        Jaime – In my case, I would like to see ALL the events for the current month only. Using the default functionality would create a massive list (which I could use the scroll option for, but would «confuse» my users as they would think the list is for the current month only (they are not very bright , even though they are teachers!)
        Could I suggest this as a «feature» to be able to show only the events for the current month on initial load?

  21. Aru dice:

    Hi, I am using your plugin show my events, but I already have few other jquery things like tabs, validations, those are not working properly. please check it at

    • Jaime Fernández dice:

      Hi, I suppose it is because you are using prototype.js also. Maybe there are conflict between them.

      • Aru dice:

        Hi, Thanks for your reply. could you please tell me how to fix the conflict issue. I used jQuery.noConflict, but no use.

  22. Chris dice:

    Hello, First of all, great work on this! I’m using this for our company website and it looks/works great. I was able to get this configured in C# to call a SQLDataReader to pull events from our events database and store the values into an array, converted to JSON, and displayed using the INLINE method. Works exactly how I needed after some modifications and tweeks.

  23. Emilio dice:

    I have found very beautiful, useful and easy your Event Calendar: really great job!! I have only a small question if you want to answer me. I am italian and I have the necessity to use the date as dd/mm/yyyy format together with the hour of the event so, how can I replace the Unix timestamp with the standard format inside the json external file? Sorry I am not a programmer and for me it is much more easier to use the standard date format. Many thanks for your answer and for your appreciate help.

    • Jaime Fernández dice:

      In this version it is only possible to use de timestamp format. For the new version of the plugin you could use more date formats. Thanks!

  24. Jaime Fernández dice:

    Not in this version. Sorry

  25. alexo dice:

    hello, excellent plugin!

    please tell me, is it possible to change or refresh the eventsjson location in an already instantiated calendar?

    thank you 🙂

  26. Malinda dice:

    is it possible to select multiple days

  27. Emiliano dice:

    Hola, me parece muy buena y muy potente la herramienta, quisiera saber si de uso libre, muchas gracias.

  28. Estimados, buenas noches. Me gustaría saber cómo calculo una fecha de evento (no entiendo cómo funciona ese aspecto del events.json.php, del parametro ‘date’)

    Gracias

  29. Claudio dice:

    Hay problemas con la visualizacion de los dias del mes en Internet Explorer 7 y 9. El plugin esta espectacular, pero pierde todo el gran trabajo que hay en el por culpa del Explorer, que como siempre da la nota. Espero lo puedan solucionar pronto ya que asi no se lo puede usar.

  30. Tiberio dice:

    Hola,
    Es increíble que haya encontrado esto después de tanta búsqueda. Es fácil de usar, muy configurable y además realiza todo lo que necesito. Tengo un pequeño problema en cuanto a los tildes. Parece ser que no sale como Utf-8. No se si es problema mío o esta configurado así.

  31. Miguel dice:

    Hola, primero comentar que es un trabajo muy bueno 😀
    He estado leyendo todos los comentarios y no he encontrado nada referente a lo que voy a decir; la cosa es que al cambiar de mes el tamaño del div «.eventsCalendar-slider» no cambia de tamaño. Por ejemplo, inicializado con el mes de noviembre del 2012 y pasar a diciembre.

    En el método dateSlider, cuando el calendario ya esta inicializado no se le asigna a $eventsCalendarSlider la capa correspondiente y al final al querer adaptar la altura de la capa no se queda guardado.
    […]
    if (!flags.wrap.find(‘.eventsCalendar-slider’).size()) {
    flags.wrap.prepend($eventsCalendarSlider);
    $eventsCalendarSlider.append($eventsCalendarMonthWrap);
    } else {
    flags.wrap.find(‘.eventsCalendar-slider’).append($eventsCalendarMonthWrap);
    }
    […]
    $eventsCalendarSlider.css(‘height’,$eventsCalendarMonthWrap.height()+’px’);

    Para solucionarlo he hecho este pequeño cambio
    […]
    if (!flags.wrap.find(‘.eventsCalendar-slider’).size()) {
    flags.wrap.prepend($eventsCalendarSlider);
    } else {
    $eventsCalendarSlider=flags.wrap.find(‘.eventsCalendar-slider’); <————————–AÑADIDO
    }
    $eventsCalendarSlider.append($eventsCalendarMonthWrap);
    […]

    Espero que os sirva y disculpad si ya lo habíais detectado y solucionado.
    Saludos y gracias por el plugin!! 😀

  32. Claudio dice:

    Espero poder ayudar a los que como yo tienen problemas con el IE9. Lo probe en dos notebooks diferentes y con la misma version de IE (en ambas la 9). En una se ve mal y en la otra bien. ¿¿¿¿?????. Si por lo que llegue a ver es un problema con la «Vista de compatibilidad». No se porque pero en la notebook que se ve mal aparece al lado del boton de recargar la pagina una hoja rota, mientras que en la notebook que se ve bien esta hoja rota no aparece. Bien hasta yo diria que en la version 9 se deberia ver en forma correcta, pero que tal si alguien lo ve mal… bueno lo que deberiamos hacer es colocar el siguiente meta en el head

    con esto estariamos forzando al IE9 previsualizarlo como si fuera la version 8, por lo que si lo ves mal en el IE9 y te aparece esta hoja «rota» al lado del boton de recargar la pagina, usa el meta de arriba y listo.

    Funciona, no sera muy correcto pero funciona, y nos permite usar este calendario, evitando los problemas de previsualizacion.

    De todas formas estaria bueno que se pueda corregir desde donde corresponda y no con este parche.

    Espero les sirva.

  33. Claudio dice:

    No se porque el meta no salio en el comentario anterior, pero es el siguiente

    meta http-equiv=»X-UA-Compatible» content=»IE=EmulateIE8″

  34. Sahir dice:

    Hi Jaime thanks for great share it’s really useful,
    The problem is current date; 3 days difference b/w server location and actual date (e.i: ‘tue’ in local ‘fri’ on server)
    How to overcome this problem?
    Thank you.

    • Sahir dice:

      ok solved the problem, when the browser is zoomed in more than 100% the design gets distorted which causes confusion 🙂

  35. Simon dice:

    I really need the multiday event option too. A simple ‘start date’ & ‘end date’ so the event spans over multiple days is all that I need.

  36. Sathish dice:

    Can i use this in a commercial application, Your app is licenced under GPL, can t see any other licence mentioned

    • Jaime Fernández dice:

      yes, you can. But please, send me a link to the page when you’ll have it online. To see how it looks like. Thanks!

  37. Jeremy McLeod dice:

    I have to ask, is there any specific reason you didn’t use jQueryUI to build this? It would be really nice to be able to quickly re-theme this by using their ThemeRoller tool, but for now if I want to use it I have to rewrite all the CSS myself.

    • Jaime Fernández dice:

      Because i don’t like jQuery UI. It insert a lot of classes, and i always try to avoid it. Sorry.

  38. Dora dice:

    Hi!
    I love it!
    I have a problem with the encoding though!
    I need it in greek so I have to put this encoding: charset=iso-8859-7

    Any ideas?
    You’ll save me! 🙂

  39. sasa dice:

    Hello,
    Can I show only current day events?

  40. Wil dice:

    I wanted to start the week with any day I chose, so I made a few changes I thought I’d share. It seems to work, but I’ll warn everyone that I haven’t tested it extensively yet. It might break something I haven’t seen yet, but for setting up the calendar it works well. At the bottom of the plugin’s JavaScript file, I added this to the defaults:

    startWeekOnMonday: true,
    startWeekOn: 0, // This is the bit I added.
    showDayNameInCalendar: true,

    Then I changed the way day headers are set up around line 175:
    // show day name in top of calendar
    if (eventsOpts.showDayNameInCalendar) {
    $eventsCalendarDaysList.addClass(‘showDayNames’);

    // Sun = 0, Mon = 1, etc.
    var i = eventsOpts.startWeekOn;
    var end = i + 7;

    for (; i 6) index = i – 7;
    daysList.push(» + eventsOpts.dayNamesShort[index] + »);
    }
    }

    dt=new Date(year, month, 01);
    var weekDay = dt.getDay() – eventsOpts.startWeekOn; // day of the week where month starts

    I’m not sure how this will work with the rest of the display types, but it’s a start in case anyone else wanted this functionality. Just assign the value for startWeekOn in the eventCalendar function and it should roll out.

  41. bassam dice:

    Hi nice plugin I want to use it with asp.net anyone have events.json.aspx sample or webservices file to integrated with the pluging

    • Jaime Fernández dice:

      No, sorry. The example is only available on PHP

    • Shlomi Segal dice:

      To use with aspx (vb.net)
      1. Create a file called:
      events.json.aspx
      2. Point the eventsjson to it:
      eventsjson: ‘events.json.aspx’
      3. In the events.json.aspx remove all the code and only leave this line:

      4. In the code-behind, enter the following:
      Imports System.Web.Script.Serialization

      Public Class events_json
      Inherits System.Web.UI.Page

      Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
      Response.Write(Dict2Json)
      End Sub

      Private Function Dict2Json()
      Dim sb As New StringBuilder

      sb.Append(«[«)
      ‘In production get this data from the database
      For index As Integer = 0 To 4
      Dim dict As New Dictionary(Of String, String)
      dict.Add(«date», GetUnixTimestamp(Now.AddDays(index)))
      dict.Add(«type», «meeting»)
      dict.Add(«title», «Test Last Year»)
      dict.Add(«description», «Lorem Ipsum dolor set»)
      dict.Add(«url», «http://www.event3.com/»)

      Dim json As New JavaScriptSerializer
      sb.Append(json.Serialize(dict))
      If index < 4 Then sb.Append(",")
      Next
      sb.Append("]")
      Return sb.ToString

      End Function

      Private Function GetUnixTimestamp(ByVal currDate As DateTime) As Double
      'create Timespan by subtracting the value provided from the Unix Epoch
      Dim span As TimeSpan = (currDate – New DateTime(1970, 1, 1, 0, 0, 0, 0).ToLocalTime())
      'return the total seconds (which is a UNIX timestamp)
      Return span.TotalSeconds * 1000
      End Function
      End Class

  42. Anand dice:

    HI,

    How to set current date is server date. pleas help me. now event calendar taking system date. how to fix this….

  43. Daniel dice:

    I included the eventcalendar and it displays fine. There is however a small issue, which is that at intial load it shows «There are no events in the period», even though I have a couple of events for the current month. Once I click «Prev» and then «Next», the event show correctly. Seems to be an issue with initialising. Can you maybe help out?

    Thanks in advance for any advise…

    My source is actually quite simple:

    $(document).ready(function() {
    var $eventsInline = [{«date»:»1354910700000″,»type»:»Match»,»title»:»Rapid gegen Austria»,»description»:»Das ist ein Derby»,»url»:»\/web\/c\/hospital\/event\/3550″,»channel»:»hospital»,»id»:»3550″},{«date»:»1357198800000″,»type»:»Event»,»title»:»change title»,»description»:»change content»,»url»:»\/web\/c\/hospital\/event\/3557″,»channel»:»hospital»,»id»:»3557″},{«date»:»1357199400000″,»type»:»Event»,»title»:»change title»,»description»:»change content»,»url»:»\/web\/c\/hospital\/event\/3558″,»channel»:»hospital»,»id»:»3558″}];
    $(«#calendar»).eventCalendar({
    jsonData: $eventsInline,
    showDescription: true
    });
    });

  44. Damix dice:

    I don’t want to display hours and minutes in event date, is it possible?

  45. Hemant dice:

    Hi Jaime! Thanks for a wonderful calender. It look and work too good. I am having problem in IE6,7,8 its CSS stop responding and calendar too stop working. In short it stop me from using it, Can you fix it?

    • Jaime Fernández dice:

      Thank you. I want to create a new version of the plugin, but the problem is that i don’t know when i’m gonna have time to do it. Sorry.

  46. Tony dice:

    How can i edit the events? at the json folder, there are 3 json files. Im trying to edit the events but i couldnt identify which are the dates or time.

    events.json.php

    <?php
    header('Content-type: text/json');
    echo '[';
    $separator = "";
    $days = 16;

    //echo ' { "date": "1314579600000", "type": "meeting", "title": "Test Last Year", "description": "Lorem Ipsum dolor set", "url": "http://www.event3.com/&quot; },';
    //echo ' { "date": "1377738000000", "type": "meeting", "title": "Test Next Year", "description": "Lorem Ipsum dolor set", "url": "http://www.event3.com/&quot; },';
    for ($i = 1 ; $i

    events.json

    [
    {
    «date»: «1337594400000»,
    «type»: «meeting»,
    «title»: «Project A meeting»,
    «description»: «Lorem Ipsum dolor set» },
    {
    «date»: «1337677200000»,
    «type»: «demo»,
    «title»: «Project B demo»,
    «description»: «Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.» }
    ]

    keithjson.json

    (i dont know)

    • Jaime Fernández dice:

      The date & Time is in javascript timestamp format. The value after «date»: (a number like 1337677200000)

      If you have a timestamp from PHP you ‘ll have to multiply it for 1000. (add 000 to the end)

  47. Ahmed dice:

    I am having trouble getting the date in the json file working. i’ve tried many combinations. I generated timestamp with php using strtotime(«now») and that didnt work, tried the mktime function, and that didnt work either. the strtotime and the mktime are both producing the timestamp but this calendar plugin just doesnt seem to be liking the date. I opened the sample data demo datafile and copied and paste the sample timestamp to a timestamp to date/time converter and the dates seem to be completely off.

    any suggestions? what am i doing wrong?

    thanks

  48. Juanma dice:

    Hola Jaime, muchas gracias antes de nada por realizar y compartir el mejor calendario en JavaScript que he podido encontrar en toda la red.
    Mi problema es que no consigo que se vea el calendario como en las demos. Lo he probado tanto en IE10 como en Firefox y en ninguno de los dos consigo que se vea como las demos, a pesar de que con esos mismos navegadores sí que veo perfectamente las demos. ¿Dónde puede estar el problema? He probado a reducir el ancho del div y sigue sin aparecer como en la demo.
    Gracias por todo.

    • Jaime Fernández dice:

      El problema es que tienes «conflictos» con otra css de tu web
      Tendrás que sobrescribir dichos estilos para que el calendario se vea como deseas.
      Un saludo

  49. Melina dice:

    Hi, is it possible to use date range in your calendar? (let say if i have event that run for days).

    • Jaime Fernández dice:

      Not in this version. But it´ll be very usefull. I’ll think about it for the new version

  50. Saptarshi dice:

    How to add events in this calendar? Plz explain..

    • Jaime Fernández dice:

      This plugin dosen’t add events. It only show events from a json file. If you want to create them you have to use another option

  51. Jack dice:

    This is awesome plugin. I’m planning to develop an cms plugin (that will be commercial one) based on this. Can i use this plugin for this purpose?

    • Jaime Fernández dice:

      Yes, of course you can use it, but if you earn some money with it a donation will be appreciate it.
      Also I want you show in your code that you have base your plugin in this one.

  52. Razvan dice:

    First of all, very nice plugin,

    About the caching system, you have only two options right now: true (gets ALL events on first load) or false (every time you change a date).

    I’d introduce a cache by month, to store all events loaded by each visited month, and filter days events by that, and each time you get back to a visited month or select a day, you will not have to load those events again and in this case you optimize a lot the traffic…

    For the moment I’ll use it in one of your versions, but if I’ll have some time, I’m thinking to adapt it this way.

    Keep up the good work 😉

  53. Jose dice:

    Hola Jaime, gracias por compartir este calendario.
    Tengo un problemilla con todas las versiones de IE y no sé como solucionarlo. el caso es que cuando llamo al fichero de los eventos desde el script:

    $(document).ready(function () {
    $(«#eventCalendarLimit»).eventCalendar({
    eventsjson: ‘/docroot/portal/dat/eventos.dat’,
    eventsLimit: 1
    });
    });

    No me reconoce el fichero de los eventos «eventos.dat» con IE, siempre me da el error, con el resto de navegadores funciona perfectamente y el problema es que no cosigo arreglarlo, ni dar con la solución.

    He cambiado la extensión del fichero a: eventos.php, eventos.txt… y nada.

    Si me puedes ayudar te lo agradecería.

    Gracias y un saludos

    • Jaime Fernández dice:

      No se, me tednrias que decir que error es el que te salta. De todos modos como extensión pon .json

  54. Julian dice:

    Hello Jaime,

    Very light and nice looking calendar. Thank you! 🙂
    I would like to vote for date range option. It would be very usefull.
    Could you please provide me with example how to change the color of a date?

    Thank you in advance!

  55. Lakshman dice:

    BTW, great job and thanks for sharing. 🙂

  56. José Maldonado dice:

    fabuloso el plugins! me viene caído del cielo… gracias por compartirlo!
    habría posibilidad de añadirle una llamada callback al cambiar de mes?

  57. Alex dice:

    Hola,

    Antes de nada felicitaros por el plugin. Funciona muy bien. Lo acabo de probar en local y funciona bastante bien aunque me da un error de javascript:

    La línea marcada dice un error, TypeRror: flags.wrap.find(…).live is not a function jquery.eventCalendar.js


    e.preventDefault();
    var year = flags.wrap.attr(‘data-current-year’),
    month = flags.wrap.attr(‘data-current-month’),
    day = $(this).parent().attr(‘rel’);

    getEvents(false, year, month,day, «day»);
    });

    Utilizo jquery 1.9. Qué puedo hacer?

    Gracias.

    • Jaime Fernández dice:

      Tienes razón. El plugin tenia un problema con la ultima versión de jQuery, debido al evento live.

      He subido una nueva versión con este bug resuelto.

      Un saludo, y gracias por avisar

  58. Alex dice:

    Supongo que debe ser porque en la 1.9 está deprecated.

    Read before you start doing a search and replace:

    For quick/hot fixes on a live site, do not just replace the keyword live with on, as the parameters are different.

    .live(function)

    should map to

    .on(eventType, selector, function)

    • Jaime Fernández dice:

      Tienes razón. El plugin tenia un problema con la ultima versión de jQuery, debido al evento live.

      He subido una nueva versión con este bug resuelto.

      Un saludo, y gracias por avisar

  59. Rousojohn dice:

    i have installed your plugin on an app i’m developing but i have 1 problem. When the page loads for the 1st time, the plugin works great, but after i click on the arrows to change month, for some reason doesn’t accept any clicks on the days. it’s like it has never bind the handler on the click event…any thoughts?

    • Jaime Fernández dice:

      Maybe it is because you don’t have the lastest version of the plugin. It had a problem with the latest version of jQuery, due to the live event.

      Replace it with the new version. I hope it can fix your bug.

  60. cpeker dice:

    Thanks for the script.

    A tip from me 🙂
    For getting today’s event on load

    Find line 42 on jquery.eventcalendar.js
    getEvents(eventsOpts.eventsLimit,false,false,false,false);

    Replace with
    var currentDate = new Date();
    var currentYear = currentDate.getFullYear();
    var currentMonth = currentDate.getMonth();
    var currentDay = currentDate.getUTCDate();
    getEvents(eventsOpts.eventsLimit, currentYear, currentMonth,»»+currentDay+»», currentDay);

  61. Best jQuery Event Calendar Plugin for Web Developers | EagleTuts dice:

    […] plugin is unique because you can choose to display the description or not. MORE INFO – Free […]

  62. […] plugin is unique because you can choose to display the description or not. MORE INFO – Free […]

  63. […] jQuery Event Calendar Plugin – english version […]