ubient

ubient supports this item

Supported

This author's response time can be up to 10 business days.

39 comments found.

Yes I wanted the bottom list diviser bar to be #7fb035. Can you help me? this is what I have right now.

.jqm-cal-wrapper { padding: 0; margin: 0px; display: block;} .jqm-cal-wrapper table {color: #7fb035; margin:0; width: 100%; border-collapse: collapse; table-layout: fixed;} .jqm-cal-wrapper th {padding: .3em 0; text-align: center;} .jqm-cal-wrapper th.header {background: #7fb035; border-color: #7fb035; color: #00000; line-height: 40px;border-left-width: 0;border-right-width: 0;border-top-width: 0;margin-top: 0;padding:0;} .jqm-cal-wrapper .previous-btn {float: left; margin: .3em .5em;} .jqm-cal-wrapper .next-btn {float: right; margin: .3em .5em;} .jqm-cal-wrapper .dayName {background:#7fb035; font-weight: normal;border-color:#ccc;text-shadow:none;} .jqm-cal-wrapper td {text-align:center; padding: 0; } .jqm-cal-wrapper td.lowres, .jqm-cal-wrapper span.lowres { opacity: 0.3;} .jqm-cal-wrapper td a { padding: .5em 0; margin:0; border:0; } .jqm-cal-wrapper td span { position: absolute; top: 20px; left: 0; width: 100%; text-align: center; } .jqm-cal-wrapper .ui-body-b {border: 1px solid #ddd; } .jqm-cal-wrapper .ui-btn-up-b {background:#fff; color: #707070;font-weight: 400;text-shadow:none;} .jqm-cal-wrapper .ui-btn-today {background: #;} .jqm-cal-wrapper .ui-btn-active {color: #ffffff;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);background-color: #7fb035!important;background-image: -moz-linear-gradient(top, #454545, #454545)!important;background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#454545), to(#454545))!important;background-image: -webkit-linear-gradient(top, #454545, #454545)!important;background-image: -o-linear-gradient(top, #454545, #454545)!important;background-image: linear-gradient(to bottom, #454545, #454545)!important;background-repeat: repeat-x;} .jqm-cal-wrapper .hasEvent {background: #7fb035; border-color: #7fb035;} .jqm-cal-wrapper .ui-listview {margin:15px 0!important;}

Thanks :) Remember to leave a “buyer rating” :)

Yes; .jqm-cal-wrapper .ui-li-desc {white-space:normal!important;}

Awesome I will try it now! Rating top notch stuff here!

Hi, I adapted your calendar for my (non-mobile) website. Everything works fine, but I found a silly problem, if I show an event whose time is 2:00 or later, the event is shown on the correct day in the calendar, but if the event is before 2:00 the event is shown in the calendar on day -1.

I initialize the dates as follow in javascript:

var date1=new Date(2014,9,2,9,0); //for 2 Oct 9:00, shown in 2 Oct, ok

var date2=new Date(2014,9,2,0,0); //for 2 Oct 0:00, shown in 1 Oct, no ok

Is this a known issue or something similar?

I solved my problem initializing the dates as follow:

var date1 = new Date(Date.UTC(2014,9,2,0,0));

It was a javascript UTC isse, all fine now.

Hi. Sorry for late reply, but been REAL busy of late. I am happy you solved the problem, and thank you very much informing about the solution.

Hi

How can I change the data from external data, example:

Change this:var calEvents = [ {eid 3”,name qualquer”,url vem um texto qualquer do evento do dia 01 de Outubro.”}, ];

For a external data from PHP, for example.

Tks

Hi. If you take a look at the doc and in the index.html example file in the zip you will see several examples.

If you need to create an array of your data, please take a look here: http://stackoverflow.com/questions/21186881/javascript-create-a-new-array-from-json-results/21186929?noredirect=1#comment31901565_21186929

Someone have a example from a external Json data for events.

For example, I wanna change var calEvents = [{eid 3”,name quer”,url vem um texto qualquer do evento do dia 01 de Outubro.”},]

For a external data Json.

Thank you

Hi. If you take a look at the doc and in the index.html example file in the zip you will see several examples.

If you need to create an array of your data, please take a look here: http://stackoverflow.com/questions/21186881/javascript-create-a-new-array-from-json-results/21186929?noredirect=1#comment31901565_21186929

Same question as rafabiton. I need a json example. I can bring in the json data via ajax, but the calendar won’t initialize. I think it’s the date formatting. Thank you.

Hi. If you take a look at the doc and in the index.html example file in the zip you will see several examples.

If you need to create an array of your data, please take a look here: http://stackoverflow.com/questions/21186881/javascript-create-a-new-array-from-json-results/21186929?noredirect=1#comment31901565_21186929

Thank you for your quick response. Forgive my ignorance of javascript objects, I’m learning.

Your example has this MyEventsList object: var MyEventsList = [{eid 3”,name event test 3”,start Date(“2014-10-26T08:00:00.000Z”),end Date(“2014-10-27T08:00:00.000Z”),summary ipsum”}];

I can easily get the info from my database, except the new Date(). My json feed looks like this: var MyEventsList = [{eid – Masullo”,start Summary”}]; Why do we need to create a new instance of the date inside the MyEventsList object? Why can’t we just use the date e.g. start”? If we have to create that new instance inside the MyEventsList object, I can’t figure out how to accomplish that. Thank you for your help and patience.

Figured it out. Don’t know if this is the best way, but it worked. I iterated through the object and replaced the date with new Date.

for (var key in calEvents) { if (calEvents.hasOwnProperty(key)) { var obj = calEvents[key]; for (var prop in obj) { if (obj.hasOwnProperty(prop)) { if (prop==”start” || prop==”end”){ obj[prop] = new Date(obj[prop]); } } } } }

Hello, I want to buy this item, but the live preview is not working. Where can I see a full demo? Thank you

Can not see there is a problem with the live preview?? Let me know if you still are unable to access it..

Test it via firefox and Chrome for desktop and mobile with no positive results: http://codecanyon.net/item/jquery-mobile-event-calendar/full_screen_preview/6874348

The browser just ends loading a blank page.

Sorry, but I can still see no error here.. I have tried local and trough VPN from another country. works perfect… Try another browser.. oh and.. if you figure out it is a browser problem, let me know… I have tried several and they are working good all of them…

Hello, the calendar works great, but when a choose a webapp on iphone (fullscreen), nothing appears?

Can you help me?

Sorry for the late reply, but I guess you are setting up events for your calendar with a date format that is not accepted by the iphone. (I came across this issue myself). http://stackoverflow.com/questions/5324178/javascript-date-parsing-on-iphone

Can this support .ics (iCalendar) standard input and show dates? I would really buy if it could show, or show events from Google Calendar.

ICS support not included as of now.

Hello, I can write the date format like this? "start": new Date ("15-02-2015"), "end": new Date ("18-02-2015"), instead of: "start": new Date ("2015-02-15"), "end": new Date ("2015-02-18"), Thanks

Hello, this script is easy or hard to install in my server?

ps. I don’t speak english very well.

Thanks a lot!

It should be easy to “install”, but some javascript knowledge to display events inside the calendar is required. There should be examples to “play around” with, ALSO take a look in docs + these comments for more help. Many questions have been asked and answered here.

Hello: When loading the calendar would be possible to load only the events for the current day? Perhaps changing the script? But I do not see how. Any ideas? Thank You

yes., You can do this in your init function. Just throw the calendar the events you would like it to display. Bind an event to the “next/prev” buttons, and throw the calendar new items to display.

This is outside the scope of our support, but make use of stackoverflow if you have any scripting issues.

Hey, can you help me? I’m building a web app with jquery and i want to add this calendar to one of the pages. How i can make this? I really strugle with this. I tried but then my app trying to open calendar there is a blank page. Thank you.

this is outside our scope of support, but I guess you are calling some scripts in wrong order or multiple times in your app.

Take care to load your jquery scripts in the right order.

Sometimes it is helpful to load one script after the other to figure out when the problem occurs. Also, FireBug in Chrome or Firefox is your friend….

Thank you for the great calendar Ubient. I am using dynamic data for the events. I can get the calendar to initialize with the dynamic data, but I am having a few issues. 1. When I have the summary set as: summary“}, the calendar will not initialize. It works with other data, or just type, but for some reason this text based data (possibly because it contains formatting code) causes the screen to go white and the calendar doesn’t load. I have tried the one suggestion above to allow longer content, but it doesn’t fix the issue. 2. Trying to link the event listings to a detail page, but I cannot figure out your instructions in one of the comments – change href=’#’ to href=’”+ event.url +”’ – If my URL is url”, where exactly do i need to make adjustments in the CSS/JS files? 3. It would be great to integrate an image/poster for the events in the listings. Where/how would I insert the code to have an image thumbnail? Thank you! Great product so far. Will get 5 stars once i get these things figured out.

Hi. Your problems occurs because of your formatting code. I would suggest creating the array of items first, and then send everything in regular text on init calendar. This goes for the linking to next page to.

The below is an almost exact copy of what is used in a mobile app (iphone and android). I am using only id to go to next page on click. Hope it can help you out.

var Events = []; for (var i = 0; i < jsonResponse.length; i++) { var self = jsonResponse[i]; var sarr = self.start.split(/[- :]/), start = new Date(sarr[0], sarr[1]-1, sarr[2], sarr[3], sarr[4], sarr[5]); var earr = self.end.split(/[- :]/), end = new Date(earr[0], earr[1]-1, earr[2], earr[3], earr[4], earr[5]); Events[i] = { eid: self._id, name: self.name, summary: self.summary, type: self.type, organiser: self.organiser, url: '#', start: start, end: end }; } //console.log(Events); $('div[dsid="EventCalendar"]').jqmCalendar({ events : Events, days : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], startOfWeek : 1 }); $("a.event-item-link").on("click", function(event) { if ($(this).attr("id")) { window.location.href = "http://www.google.com/id="+$(this).attr("id"); });

Regarding img, you can post an icon variable to the calendar script, look inside the eventcalendar script. just make a backup and play around with it..

I love this simple calendar. Is there any plan to add a choice to choose from a category to format the event link on the calendar? I would like to display “meetings” as one color and another event as different.

Sorry for late reply.. I would actually just use CSS for this, and set the current class when loading calendar. ex; if type 2, set css class meeting, else if type 3, set css class vacation.. and so on… example: http://stackoverflow.com/questions/11474430/change-css-class-properties-with-jquery

I’m interested in the same answer, I would like to note holidays, open house, and two other categories with different colors on the calendar. Is this possible?

Sorry for late reply.. I would actually just use CSS for this, and set the current class when loading calendar. ex; if type 2, set css class meeting, else if type 3, set css class vacation.. and so on… example: http://stackoverflow.com/questions/11474430/change-css-class-properties-with-jquery

Is RTL supported? means, first day of the week will be the most RIGHT column on the calendar

If not, do you have any advise on which way I should implement that?

Thanks

No support for RTL. Would require some re-writing of the init of calendar script. You will have to play around with it as it is not in my plans to implement.

@techmeetups, i am wanting to purchase this calendar to use with Appery.io as well. How did you get it to work? I Before i purchase it, I would like to know how you got it to work with Appery.io. How are you populating the events? From a collection in the database?

Hi. From database yes. Get your data, loop it and publish to calendar.

The below is an almost exact copy of what is used in a mobile app (iphone and android). I am using only id to go to next page on click. Hope it can help you out. var Events = []; for (var i = 0; i < jsonResponse.length; i++) { var self = jsonResponse[i]; var sarr = self.start.split(/[- :]/), start = new Date(sarr[0], sarr[1]-1, sarr[2], sarr[3], sarr[4], sarr[5]); var earr = self.end.split(/[- :]/), end = new Date(earr[0], earr[1]-1, earr[2], earr[3], earr[4], earr[5]); Events[i] = { eid: self._id, name: self.name, summary: self.summary, type: self.type, organiser: self.organiser, url: '#', start: start, end: end }; } //console.log(Events); $('div[dsid="EventCalendar"]').jqmCalendar({ events : Events, days : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], startOfWeek : 1 }); $("a.event-item-link").on("click", function(event) { if ($(this).attr("id")) { window.location.href = "http://www.google.com/id="+$(this).attr("id"); });

how you fit the events?

by
by
by
by
by
by