The last few weeks I worked on the calendar views for the upcoming Tine 2.0 release. For sure, the new calendar also will be made with the great UI technologies like all ExtJS widgets. Unfortunately, there was no Calendar widget out there, so I had to get my hands dirty and code my own one.
At the moment I have Day, Week and Monthview working. The Day and Week view supports direct creation of Events using dblclick or a mousedown/mousemove combination. All views support drag and drop of events. For fast switching of views, you can click the jumppads (dayheaders/weeknumer).
I made a litte MemoryProxy as Backend for the demo bellow, so you can change views and move around in time. The whole demo is Javascript only. The Calendar views are designed like normal ExtJS widgets and should be highly reusable. If you want to join development for them, please drop me a note.
How exelent it is.!!
Is this time schedule open source? May I ask the source? I am truly need it. Thanz
Hi ruktin,
the components are open source, licesed under the terms of the AGPL. In short this means, that you are free to use it in an open source context. If you want to use it in an non open-source application, you need a version with a different license -> contact me via c.weiss[at]metaways.de.
here is the link to the code:
http://svn.tine20.org/svn/trunk/tine20/Calendar/js/
http://svn.tine20.org/svn/trunk/tine20/Calendar/css/
thank you very much. I hope this code usefull for me. May I ask more?
discussion about the code should take place in the tine20.org’s forum:
http://www.tine20.org/forum/viewforum.php?f=4
Wow, nice implementation. Great job all around. Reminds me of Google calendar, but much better.
Just a tiny terminology snafu – this was made using “Ext JS”, the addition of the word “core” made me think it was coded with “Ext Core”, which is a separate library.
Hi…great script!
I’m trying to customize it…but I don’t find a solution for this option: my daily and weekly calendar must start at 9:00 am and finish at 9:00 pm…so 12 hours per day!
Could you help me? What’s the var or function to control this option?
Tnx in advance
hi, you can call me suikoden, I am a beginner in javascript, but I have some task to finish, to perform some data to get in timeline. I need timeline that you’ve wrotten above, It’s too complicated to study it, I want to input data from jsp to timeline without through MemoryBackend.js, in other word, I want to keep it simple, can you show me how?or if you don’t mind, help me simplify it, and show it here or send me an email.
I am sorry before if I look like not care enough about tine2.0, but actually, I want to help you developing it, it’s just I haven’t understand javascript, yet. Thank you greatly.
@Freesurf,
thats nothing build in yet. You will have to get your hands dirty.
Maybe it’s a quick solution to wrap the scroller in a div with overflow hidden.
If you are successfull, please send the the patch
@Shea,
thx for the flowers! The goal is to make it with Ext Core, but as we need to get out our Tine 2.0 release in the next weeks, this is still ext2, but will be upgraded later
@suikoden,
as you mentioned, the calendar component is quite complex. But it’s designed to work quite stand allone and it should be no problem to use it with a jsp backend.
You can e.g. use the JsonBackend from the Tine 2.0 repository.
If you need a commercial license, please drop me a note per email.
Beautiful calendar. I have made many changes to your code, will all be published with the project, but would like to know if you want a copy of the changes beforehand.
Hello there,
I have tried my best to get the script to “edit” when double clicking on an existing event.
I must say that I feel at a loss as to making it work.
Would you please help me a little?
Many thanks,
@Jose Gonzalez tnx
shure i’d like to see the code. If you like to see your stuff in the official upstream, please sign our contributors license agreement: http://www.tine20.org/licenses/metaways_icla_1.1.pdf
In the meantime, i also made huge changes, and the next 2 or 3 weeks will be fulltime on Calendar for me. So lets get in touch and try to coordinate our work.
@sinclairfr
I guess you want to edit the title on dbl-click? I have not yet relayed the the event(appointment) click events(browser events) yet. It will come in the next days.
Cornelius:
I would love to help you out with the calendar. I need to take it in a different direction, so a lot of my code will probably not help you, but I will pitch in as needed for the Tine product. Please contact me at my e-mail address as there are some points I need to clarify.
You can get an idea of what I am using ExtJS for at “http://www.ecandidus.com/pages/webtos.htm” and what I need to mimic with the calendar at “http://www.ecandidus.com/pages/week_@_a_glance.htm”
If you do not have my e-mail address, see the bottom of either page for contact info.
Beautiful calendar. How can I use this in JSP page.
Tried this out and I like this widget, but noticed that entering events in IE6 doesn’t work.
Hi,
first, congratulations to your project, it is fantastic.
I’m from Brazil and I pretend improve and document it from portuguese.
But, I found two bugs in IE. In Day and Week View the events not appear and in Month View the size of container is wrong calculate.
Do you know this problems? Can help or post a link (with a thread discussion) about this?
Very very very thanks.
Hi Cornelius Weiss,
What is the extjs version used for this? i tried this code with EXTJS 3 and it gives me some errors related to toolbar.
Thanks
Keth
Hi Cornelius,
your calendar is fantastic. Can you provide a working stand-alone example with last version of your code (from tine 2.0 last release)?
Thanks
Massimo
I hope I find some time to provide an up to date example
Ok, many thanks!
Thanks so much Cornelius this is a very nice calendar! Was easily able to make it work with a Domino back-end.
I’m relatively new to extjs but if I make any changes or improvements will let you know.
Hi Cornelius,
Thanks so much for your great example on using the calendar,
I have update it into Ext3.0 version and using JsonWriter to do the create/update/delete process.
However, according to the structure, all the http request should be handle in the MemoryBackend.
When I override the Tine.Calendar.backend as by using self-developed proxy, the update method and the delete method will be also running, instead of handled by MemoryBackend.
Some question would like to ask that:
1. How can i use Memorybackend to do the restful request/response to server?
2. If it cannot, how can I control the update method (it will be invoked when doing event.set(XXX) in Daysview.js) and the delete method (it will be invoked when doing this.ds.remove(XXX) in CalendarPanel.js) run when update the size of the schedule event?
Once again, thanks you for the great work.
Chammy