Displaying events by date on a calendar from a db - javascript

I'm currently trying to build an events page for a local residents association.
I'm using laravel as my framework, but that's not so important to this question. I need to display a calendar of upcoming and past events. On the front end I am using bootstrap 3.
So far I've had no luck on finding a calendar to work with my requirements below:
Must be easily styled to match sites theme
Must be able to display a tooltip of the events data (which potentially includes a picture, a paragraph, and the time of the event) not a modal
Should be well documented, or at least have usable documents
Should still be supported if possible (not as important as 1-3)
Does anyone know of a calendar that matches these requirements?
Cheers,
Peter McKinney

Hope fullcalendar jQuery Plugin will fulfill your needs

Related

AngularJS Bootstrap Calendar MWL

I'm trying to customize Matt Lewis's calendar, I've read the documentation and researched this but I can't find an easy solution. What I need to do is pretty straightforward, but I have no idea how to do it.
The Week view contains my event names, and I can click on that to launch my modal but that's where I am stuck.
I want that same functionality to appear in the Month view instead of the badge incremented label, and the slid down div.
I won't post lots of code here because I don't know what logic is the part that needs changing!
Here is a URL to the test site: UI Calendar Test Site

Looking for JS datepicker modular script that can plug in to custom JS date range picker

(This might not be specific enough for StackOverflow, but I do have actual code samples. If you think it's too vague, let me know in a comment or vote to close.)
Background
I'm designing a date range picker for an internal web application. The way it works is that clicking on an input will pop up a list of pre-defined ranges, similar to how date range selection works on Google results:
Only if a user taps on Custom Range/Date will they get a calendar. There are panels inside the popup, sliding sideways, and they'll see one or two calendars (if range or if single date).
Problem
I'm looking for a date picker script that I can plug into my existing custom date picker class. I'd like to be able to call it from JS, and attach a callback to return the date. There will be no input HTML elements.
A perfect API in my mind would let me do something like this:
var beginDatePicker = new DatePicker({
default: beginDate,
callback: function(event){
// do stuff with returned date
}
})
... .appendChild( beginDatePicker.el.wrapper );
That way I could create a calendar, then use the callback to store the date and animate to second calendar, and then finally place the dates in the hidden inputs.
I can't find any open-source datepicker scripts that are modular though. They all require an input element, but I need to be able to create and destroy the calendars as I go.
Do anyone know of a library/script/class that works in the above manner?
Answer
It doesn't exist, anywhere I can find. The solution is just to take an open source option, fork it, strip out the pieces that I need, and use that.

Fully custom lightbox in dhtmlxGantt

Hi there,
I'm looking at using dhtmlxgantt as a way of building up an itinerary i.e. you add items at specific days throughout a period (most likely 2 weeks)... However, there are quite a few extra variables that I need to store along with the standard info of dates etc. There are a series of 4 dropdowns which populate the next one via AJAX.
I know I can add custom controls into the lightbox but these will not work via AJAX when the previous dropdown is changed. I was hoping that I'd be able to make a fully custom lightbox which then passes everything back to dhtmlxGantt but I can't seem to find away...
It looks like it's possible in the scheduler product (http://docs.dhtmlx.com/scheduler/samples/02_customization/16_custom_form.html) can we do the same with Gantt?
Thanks in advance,
Adam.
You can just redefine gantt.showLightbox method and show your form from there. And then use public API to save changes - gantt.addTask, gantt.updateTask, gantt.deleteTask
Here is a crude example:
http://docs.dhtmlx.com/gantt/snippet/5e134aa1

How to show full screen calender on webpage?

Hi i want to show full screen calender on webpage & i want to display the data on the cells of the calendar.Is there any way by which we can use this?
I don't want a date picker.
Does google calendar APi provide the same thing?
http://fullcalendar.io/ is a a JavaScript event calendar. Customizable and open source.
Have not tested this myself, but looks like something you could use in this case.
FullCalendar is a jQuery plugin that provides a full-sized, drag & drop event calendar like the one below. It uses AJAX to fetch events on-the-fly and is easily configured to use your own feed format. It is visually customizable with a rich API.
FullCalendar also got it's own tag here at SO with a couple of thousand questions, which makes it easier to find resources for common tasks.
After a quick Google search I found this, maybe one of those can solve your problem.

Jquery plugin with google calendar

I have a webpage in jquery mobile and now I am using the plugin "fullCalendar" for showing info from a google calendar.
I was asked about use another plugin instead of this one to be able of showing the day square in other color rather than shows the event title and hour.
I searched on internet but I haven't found any plugin for doing what I want.
Do you know one with this ability?
User eventRender callback to modify how the event is rendered (no text, different colour, anything else you need).

Categories

Resources