Adding a Resource View/Gannt chart to jQuery Fullcalendar - javascript

I am using jQuery Fullcalendar and if you're not using it I suggest you do too because it is absolutely fantastic at what it does!
However to be really useful to me and my project (and many others) I honestly believe it needs a resource/gannt view.
Not a problem one would think... until you look under the hood of jQuery FullCalendar and see that the way it generates it's views is not for javascript developer wannabes... ie me.
Having realised this is out of my league I had to go searching elsewhere looking for any calendar/scheduler that will provide a resource view.
Here are three proprietary calendars that promise this feature.
http://java.daypilot.org/
http://www.dhtmlx.com/docs/products/dhtmlxScheduler/index.shtml
http://web2cal.com/ajaxeventscalendar/calendar-demo/912-premium-demo/157-scheduler-view
Unfortunately both daypilot and dhtmlxscheduler lack the clean and clear interface that FullCalendar achieves so well and web2cal just looks and feels unfinished and is still in Beta.
Alternatively I was wondering if anyone has any ideas on how I could integrate a jQuery Gannt chart with jquery fullcalendar.
I have found a few projects that look promising
http://www.maro-z.com/examples/jquery.gantt/
http://code.google.com/p/jquery-gantt/
http://github.com/thegrubbsian/jquery.ganttView
I have looked into how fullcalendar generates its views and so far have not had any success in extending this to provide a container for one of these gannt charts to 'sit within' fullcalendar and be triggered by its buttons.
This seems to be one of the more popular feature requests with many people asking for it on the official issue tracker
http://code.google.com/p/fullcalendar/issues/detail?id=150&colspec=ID%20Type%20Status%20Milestone%20Summary%20Stars
So I am left at a cross roads. I could pay for a half baked proprietary solution that has minimal to no community support or I can try and find a way of getting a resource view inside of jquery Fullcalendar by asking the people who really know jQuery.
I would happily donate the funds saved from using a proprietary solution to the developer of Fullcalendar.
The developer of FullCalendar seems to have a lot on his plate and I would like to again thank him for this truly amazing calendar.
I hope someone can share a solution with us!
Tim

Just to update what has been done for this idea:
https://github.com/jarnokurlin/fullcalendar
It's now a fork of fullcalendar.

For those searching for a resource view based on v2.1.1.
Here is a fork implementing it that will hopefully be merged into fullcalendar at some point.

I know it's a pretty old question, but I was looking for something like that a few weeks ago and I couldn't find anything here. So, what I'm using is Kendo Scheduler. It has a horizontal grouping, vertical grouping, timeline and some other interesting things like bind against SignalR.
Moreover, FullCalendar announcement that it will be a Resource/Timeline view soon. But probably it will be released under a commercial license.

As far as what StackOverflow users can offer you as an answer, this is as close as you'll ever get:
http://code.google.com/p/fullcalendar/issues/detail?id=490
There is an open task and at the bottom are some work-in-progress examples of extensions to fullcalendar to achieve what you want. Please offer to contribute or clean up the code there to get it merged into the mainstream fullcalendar project.

There is a https://dhtmlx.com/docs/products/dhtmlxGantt/ which has a resource view as well. You can integrate it with full calendar. It's quite simple.

Related

Jquery mobile - 1.4.2 : general documentation lakes?

I'm trying to learn some Jquery Mobile basic to state if this language would be appropriate to build inhouse mobile application prototypes.
I'm using the 1.4.2 version and the associated documentation looks very strange for me.
For example, a lot of methods are declared deprecated as of 1.5 version , but corresponding replacement examples are never given.
Perhaps have I serious problems to understand but reading this jqmData() documentation page for example, Quick reading this article I understand :
1°) that the jqmData() method doesn't accept arguments (green highlighted section)
.jqmData()
This method does not accept any arguments.
2) and few lines bellow :
you should use $("div:jqmData(role='page')")
This is just an isolated example but a lot of posts give advice that are cons for others with no serious reasons as if everybody was always searching for workarounds instead of using consistent and stated development policies.
is it just my own feeling or is it shared opinion ? It's really disturbing when you're learning not to be confident in such basic material.
In fact my feeling is that information is spread over a huge number of sources that don't state about version level issues and future compliance constraints. For example What's the right development strategy to adopt : using html 5 data-* attributes or jqm classes ? what's the advice ? A mix of both is really not a proper choice for code readability in team devellopment.
Would you have 1.4 jqm consitent documentation references ?
thanks in advance
I hope it's not to late, I will try to give you a honest answer.
On the first glance jQuery Mobile documentation looks like hell, chaotic bunch of ambiguous data.
A lot of information without a real context. This documentation is written for developers with prior jQuery knowledge. If you carefully take a look you will see that basic documentation form reflects jQuery documentation. Basically it is useful only if you know what and where to look.
On the other side, once you learn what's what it becomes obviously easy to read.
There are a lot of mistakes and it takes to much time for them to get corrected. This is partially fixed thanks to StackOverflow, here you will more answers (better explained) and information regarding jQuery Mobile then provided in official documentation.
I don't know what happened to 1.4 documentation, 1.3 had much better one. You would learn everything from DEMO site and API site will only give you better perspective.
Don't worry about deprecated methods, jQuery Mobile 1.5 will have all needed answers. Old documentation rarely has information about future software releases (I'm not talking here only about jQuery Mobile, it is always like that). When few years ago development started on jQuery Mobile, plan was created six versions in advance, you can still find it online.
jQuery Mobile developers don't have that much resources like jQuery developers, plus everything is done on pro bono basis. Free product are tied to certain limitations, in this case documentation pulled the shortest straw.
While jQuery Mobile don't have best documentation ever it has best 3rd party support, other mobile frameworks don't come close, except maybe Sencha Touch but that's completely different story.
Also, when you find an error just report it on their github page. It will be fixed in notime, plus support is free ;)
Regarding your second question .jqmData() is a method while :jqmData( is a selector. But you are correct, method .jqmData( accepts parameters so it's a documentation mistake.
Regarding your third question, use of data-* attributes is a right development strategy but ultimately not the only one, you can use anything you like. Don't forget sometimes it is not easy to be HTML developer in HTML5 world.
If you are still not certain regarding jQuery Mobile then take a look at my article covering currently best known frameworks. These are oldest and best known frameworks, all of them are still in development and they are more then stable.
My advice would be these three frameworks:
Sencha Touch
Kendo UI (PhoneJS as an alternative)
jQuery Mobile
Several newer frameworks like Famo.us advertise themselves like second coming so you can also look at them. Just be careful newer is far from better.
If you have more questions feel free to ask, I have more then enough experience with mobile world, specially with jQuery Mobile.

Is backbone.js production ready?

I was recently hired at a startup as the front end developer. As our product is a user admin that will be used by financial organizations, we want the app to run as much like an application as possible. I have been tasked with finding the clientside framework.
After researching, I have chosen backbone.js. When I presented this choice today, I was asked some questions that I do not have the full answers for but thought you guys might.
Is backbone.js production ready?
Is it rock solid and is there any proof?
I will only be using models, views, and collections for this app. My question is, how confident can I be that backbone will not just randomly fail when dealing with models. Are there any official tests I might be able to look at? What are your experiences with backbone?
Is there any sort of support network in place for dealing with backbone related issues?
Answers to either of these questions as well as any insights you have that I could present to my boss would be most appreciated! I Really want to use backbone as I think its a perfect fit, but because its so new, I need to sell it.
Thanks in advance!
Is Backbone.js production ready?
Take a look at Backbone's example section. Some of its better known users include:
DocumentCloud themselves.
37signals for BaseCamp Mobile.
SoundCloud for their mobile site.
BitTorrent in a manner that is not immediately obvious from the description, but seemingly related to a beta product.
Is there a support network in place?
There is, of course, no guarantee that it will be supported by its authors indefinitely, but it has gained a lot of traction very quickly so I don't see it going anywhere soon. The authors recommend reporting issues on GitHub.
There is always Stack Overflow itself for support!
I too was looking for a front-end app framework a few months ago. Here's the list of requirements that we had and how Backbone.js responded to each of those:
1. Browser support (IE8+)
There is one caveat here: The backbone.history module makes use of hashchange event, which doesn't work in IE7 and below. There are ways to hack around this problem, so it's not a show stopper, but kind of an annoyance.
2. The ability to apply our own look and feel to UI elements
As backbone only enforces the MVC structure of your app (unlike frameworks like cappucino or sproutcore) this was a perfect fit for us.
3. Being able to hook up any other external JavaScript libraries
We were using jQuery already, and backbone supports it, so that was fine. However, it seems like backbone is trying to take a library agnostic approach (for instance you can use zepto.js instead of jQuery if you like).
4. Community Support
There is a lot of introductory material on backbone (like people posting tutorials on blogs). Unfortunately, when your APP get's complicated it turned out there were quite a few "architectural" parts we had to figure out by ourselves, there was no obvious way to do it. The DOCS are good, but not great.
I guess on of the pitfalls of opinionated frameworks (like rails), is that sometimes you get caught up in a "am I doing this right" feeling.
5. Real world examples
It's always convincing to see that someone else has actually done something "REAL" with backbone:
http://documentcloud.github.com/backbone/#examples
We ended up using Backbone, and it was overall a nice experience, and I will definetively be looking into it again for our next project.
Who is to say that something is production ready better than the product users?
I'm working with backbone.js on a relatively large project (livechat operator application, 13k+ lines, currently at early beta). I have more than three months of experience with backbone and in my opinion it's excellent. I haven't had any unpleasant surprises because of backbone. I can't imagine developing an app of this size without clean and well-structured code. With backbone you can achieve that easily.
There's also an excellent bonus when using backbone - underscore.js. You will use that a lot.
StackOverflow backbone.js tag is there for you!
Your company, being a startup, cannot be afraid of new things. You should adapt them and spread your experiences. Remember, that your product is also going to be new.
A little late to the game with this answer but I felt compelled to respond to the question "how confident can I be that backbone will not just randomly fail when dealing with models".
No code just randomly fails; code fails for a specific reason which can always be traced back to somewhere. Often code appears to randomly fail because it's so complex and obtuse you can't follow it. In the case of backbone.js, the source is small (1,500 lines FULLY documented) and REALLY well documented.
If you need to trace down what is breaking, it's a simple matter of diving into the source and seeing what is going on.
Anyhow, I hope you got to try it out at your job!
At Planbox We've been using Backbone JS in in production for over 6 months without any problems. I wrote a few posts about our experience here and here.
We even use Backbone JS for our mobile version along with jQuery.

best practice or prior art for javascript scheduling calendar

This is a bit of a subjective question, and a red banner is warning me that it 'is likely to be closed', but I'm not sure of a better place to ask so here goes.
My application calls for a very lightweight display-only scheduling calendar. Essentially an appointment book where you can see a few days or maybe a month at a time, and in each day you can see the various appointments, a-la google calendar.
The calendar needs to also have a reliable source for various holidays.
This does not seem like something I should be programming myself, since surely someone has already done the hard work, and I'm particually concerned about the holidays if I end up rolling my own.
Any suggestions for an existing product/library?
Here's a nice jQuery plugin. Shows weeks at a time.
http://www.webappers.com/2009/08/04/jquery-weekly-calendar-plugin-inspired-by-google-calendar/
We embed a Google calender in one of our apps, it works for us, but I imagine a lot of developers would have branding issues or want better integration with there application.
Try:
http://dhtmlx.com/docs/products/dhtmlxCalendar/index.shtml
or
http://yellow5.us/projects/datechooser/
EDIT
http://www.ajaxrain.com/script?sId=6250
or
http://dhtmlx.com/docs/products/dhtmlxScheduler/index.shtml

Javascript tools for building something that looks like a cable program guide

I am looking for some tools or examples of code to help me build something that looks and behaves somewhat like a cable program guide. The general idea is that this will be an administration UI to schedule assets on individual channels. Scheduled assets cannot overlap on any given channel.
I found at least one decent looking scheduler (dhtmlxScheduler) but I fear that it will not be flexible enough for me to tweak to my liking. So I think I might need a more generic solution that I can bend in the direction I need it to move.
I would hate to resort to Flex for this but it might be my best bet. Any suggestions are welcome.
BBC Glow (open source, free, JS library) has a TV schedule widget that is actually used for the BBC's online multichannel TV guide (which I now can't find, grrr).
It's called timetable and the docs for it are here: http://www.bbc.co.uk/glow/docs/1.7/api/glow.widgets.timetable.shtml
It's not obvious, but there's a working example demo here: http://www.bbc.co.uk/glow/demos/timetable/
Here's a very powerful scheduler http://www.ext-scheduler.com/
Many examples on this page, http://www.ext-scheduler.com/examples.html
It's not free and it requires ext-js. However, it's well designed, customizable and pretty.
I can not think of a javascript library that has a similar option and I have worked with several (dojo, ext, yui). With that being said though when I think of a cable menu it seems to just be a table so I would think you could dynamically create the elements and set their column span and styles with almost any javascript library. I have not done anything with Flex so I can not compare the ease with which to do that but it seems fairly routine with javascript.
Edit: my td tag got deleted. Sorry I don't know how to use stack overflow yet.

ExtJS beginner - Samples/Extensions where is the documentation?

We have been looking at the ExtJS samples quite a few times over the years and recently decided to use it because I was looking at the samples and saw a Tree Grid and felt like "Yes this is exactly what I need". So I download ExtJS read a bit on the getting started/FAQ/Tutorial from the website.
Then I decide to try to use the Tree Grid to find out it's not in the documentation anywhere. so I thought it was just that the documentation was not fully updated for the latest 3.1 release so I look at the sample code to realize that most of the JS classes used for that sample are under the ux/treegrid folder, and the only place I could find that code was by downloading it directly from the sample. I never found any documentation for it anywhere.
Not only that, I also found that there are two very similar samples: Tree Grid and a Column Tree that shows how to customize the Tree Panel component, which confuses me even more. Neither have documentation for them and I can't tell if this code is supported or which one I should use or even if I should use any of them in fact; is this code production ready or just something that was thrown out there to show a nice sample and the extensibility of ExtJS ?
I noticed that many of the samples shown on ExtJS website are using components that are not part of the 'ext-all.js' and are not really documented. So I guess I am missing something about what ExtJS is supposed to be or the general philosophy behind this library ?
I guess I was expecting that most of the samples on their website would be available widgets from the library demonstrating how to use them, not showing me "Here's what you could do if you knew how to extend those components".
Any help/comments to enlighten me would be appreciated!
Thanks
With user extensions, generally, you are on your own - which is not a bad thing. Your best bet is to read the code and if it's well documented, you may be able to run jsdoc on it. I know this is not what most people want to hear, but it's best to understand the code you are adding to your project as if it was your own.
Specifically for the ux.treegrid.TreeGrid you are using, there are plenty of examples in the forums and on the net to get you rolling (I think TreeGrid is newer than the ColumnTree). If you get stuck on a specific issue, the forums and stackoverflow are the perfect places to get a quick answer.
So I guess my answer is, "Download the extension and start playing with it as if you wrote it yourself. When you run into a problem, post it here.".
I have found site where you can download more or less full ExtJS documentation with ux (User eXtension)
http://www.diloc.de/blog/extdocsuite/
Short description of the link.
ExtDocSuite
The ExtDocSuite is an Adobe Air Application that includes the current ExtJS 3.2 Documentation in a single application to install. We provide this package, because ExtJS has not yet updated the Air Documentation app for Ext 3.2.
Features:
* Includes the latest Documentation for ExtJS 3.2.0
* Includes the latest ux Documentation from the examples/ folder (using ext-doc)
* Includes the latest Ext.Air Documentation. (using ext-doc)
* Search works (online)
* EXPERIMENTAL per-class search aids in finding the right documentation in big classes
* Integrated Update-System so that your documentation always stays up to date
Starting with Ext 4.0, official ux'es have become much better supported and documented by being included with the API docs (look under the Ext.ux.* namespace).
The Ext 3.3 ux docs are located here. Not sure how complete they are, so YMMV (e.g. both TreeGrid and ColumnTree are included, but without any real documentation).
I encountered the exact same problem recently when I went to use the row editor capability (attached to grid). Being a long time ExtJS user, I never stopped to think about the lack of documentation accompanying the examples, but your comments are spot on.
For the RowEditor, I found documentation on the internet. I also find the ExtJS forums to be a great place to find suggestions, code samples, and links to documentation .

Categories

Resources