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:
- 9 Plugins to create calendars
- 30+ Great jQuery Calendar and Date Pickers Plugins
- 5 jQuery calendar plugins that can be used on websites
- …
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
También te puede interesar:
-
iosSlider: Responsive and touchable Carousel
junio 7th, 2012iosSlider: Responsive and touchable Carousel
junio 7th, 2012 -
Mantener elementos siempre visibles
julio 17th, 2012Mantener elementos siempre visibles
julio 17th, 2012 -
Inserta tus fotos de Instagram en tu web
junio 20th, 2012Inserta tus fotos de Instagram en tu web
junio 20th, 2012
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?
The date format i’m using is timestamp.
The Unix timestamp contains the number of seconds between the Unix Epoch (January 1 1970 00:00:00 GMT) and the time specified.
It is one of the more standard format date. You can see how to convert timestamp in this page: http://stackoverflow.com/questions/2315408/how-do-i-format-a-timestamp-in-javascript-to-display-it-in-graphs-utc-is-fine and more info here: http://www.w3schools.com/php/php_date.asp
Any other question?
sera que puedes mostrar otra rspuestas,,,yo ago todo lo q me dice ahi,,,pero no coincide el resultado aparacen 3 numeros menos,,,, y no da la fecha,,,
Como te he dicho en la respuesta anterior, añáde 000 al final
Si es verdad asi funciona,,,,,pero capte eso antes d q me respondas,,,pero muchas gracias,,,,,,,Muy buena herramienta,,,,,ya lo tengo funcionando en local llamando ,,jalando datos del mysql,,,
how can i use php file to get data?
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.
I have used HTML tables with the containing the field name and the containg the data, and using jQuery to create inline json from the table.
If this helps anyone
http://www.intronet.org.uk/dev/calender/index.html
I have used HTML tables with the <thead> containing the field name and the <tbody>containg the data, and using jQuery to create inline json extracted from the HTML of table.
If this helps anyone
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
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?
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.
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
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
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.
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.
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.
Hi Jaime! Is it possible to display 2 or more months in one view and scroll them by this number?
No, sorry. But now it is not possible to do what you are asking for.
hello
i want jQuery Event Calendar Plugin but I canot download it.please help me.
please send this plugin to my email.
thank you
Hi, you can download it here: http://jquery-events-calendar.googlecode.com/files/eventCalendar_v04.zip
can we show the year/month select dropdown to navigate through years and months
The plugin has not this functionality at the moment, and I think that i’m not gonna develop it in the nearly future. Sorry.
thanks. hope it’ll come soon 😀 😀
How do I resize this calendar more easily?
You don’t have to resize it. It use the content of te parent DIV.
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.
edit the plugin CSS file.
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.
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.
I think it must be fixed with new version. Thanks!
Sorry, but i have no idea about release date of the new version.
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;}
also in IE, the background does not have the nice metallic fade effect.
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
I test it on IE8 and looks fine. Thanks for your comment
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
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.
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!!!!
Me puedes ayudar con esto? Saludos
Hola, creo que no va a ser fácil ayudarte, ya que tus dudas no son con el plugin de calendario, si no con PHP. Lo siento.
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 ‘]’;
?>
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.
How would you define multiple days for a single event? Without being able to do so this plugin is useless???
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.
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 ‘]’;
Amazing! thanks a lot.
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
Sorry, but I didn’t develop that Zend extension. I will try to integrate on next version, but I can’t promise you anything.
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.
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,,,,
Tienes que mostrarlo en formato TIMESTAMP, y añadirle al final 000 para convertirlo en formato Timestamp de Javascript
ok,,,,,,esta muy bien,,,,,,perdon,,,,,,en que lugar puedo modificar el tamaño del calendar sin dañar parte de ella,,,,
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.
Hello,
Thanks for the pluggin.
Please write, how do remove the Ordinal Numbers english shorts (-st, -nd- th,) from the .
Comment the function «num_abbrev_str» if you want to remove de -st, -nd,… from the date
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 */
Hi, is it possible to not allow the user to navigate to months, if no events exist?
sorry, but it’s not possible at the moment.
is it possible to show events in different div that i placed somewhere else? BTW great script. thx
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
How to change white background, to any color?
Thanks, solved (event calendar theme responsice, eventCalendar-wrap, bckground color)
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?
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
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?
I’ll think about it for the next version of the plugin
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
Hi, I suppose it is because you are using prototype.js also. Maybe there are conflict between them.
Hi, Thanks for your reply. could you please tell me how to fix the conflict issue. I used jQuery.noConflict, but no use.
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.
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.
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!
Not in this version. Sorry
hello, excellent plugin!
please tell me, is it possible to change or refresh the eventsjson location in an already instantiated calendar?
thank you 🙂
is it possible to select multiple days
No, sorry, it is no possible
Hola, me parece muy buena y muy potente la herramienta, quisiera saber si de uso libre, muchas gracias.
si, por supuesto. Puedes usarlo como quieras
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
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.
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í.
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!! 😀
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.
No se porque el meta no salio en el comentario anterior, pero es el siguiente
meta http-equiv=»X-UA-Compatible» content=»IE=EmulateIE8″
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.
ok solved the problem, when the browser is zoomed in more than 100% the design gets distorted which causes confusion 🙂
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.
Can i use this in a commercial application, Your app is licenced under GPL, can t see any other licence mentioned
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!
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.
Because i don’t like jQuery UI. It insert a lot of classes, and i always try to avoid it. Sorry.
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! 🙂
Hello,
Can I show only current day events?
to show only today events, you have to click on the current day in the calendar.
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.
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
No, sorry. The example is only available on PHP
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
HI,
How to set current date is server date. pleas help me. now event calendar taking system date. how to fix this….
It is Javascript, so it always use visitor browser time.
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
});
});
I don’t want to display hours and minutes in event date, is it possible?
Yes, it is possible. The easy way is to hide them with CSS. (display:none)
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?
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.
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/" },';
//echo ' { "date": "1377738000000", "type": "meeting", "title": "Test Next Year", "description": "Lorem Ipsum dolor set", "url": "http://www.event3.com/" },';
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)
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)
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
nevermind, i got it, i had to do strtotime *1000 to get it to work with this plugin
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.
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
Hi, is it possible to use date range in your calendar? (let say if i have event that run for days).
Not in this version. But it´ll be very usefull. I’ll think about it for the new version
How to add events in this calendar? Plz explain..
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
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?
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.
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 😉
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
No se, me tednrias que decir que error es el que te salta. De todos modos como extensión pon .json
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!
BTW, great job and thanks for sharing. 🙂
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?
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.
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
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)
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
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?
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.
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);
[…] plugin is unique because you can choose to display the description or not. MORE INFO – Free […]
[…] plugin is unique because you can choose to display the description or not. MORE INFO – Free […]
[…] here is the link to the calender js library : http://www.vissit.com/jquery-event-calendar-plugin-english-version/ […]
[…] jQuery Event Calendar Plugin – english version […]