robmonie / jquery-week-calendar Goto Github PK
View Code? Open in Web Editor NEWNow actively maintained in the following fork - https://github.com/themouette/jquery-week-calendar
Now actively maintained in the following fork - https://github.com/themouette/jquery-week-calendar
I would like to display the calendar horizontally, with the days on the left and the time intervals on top. Is there a way to do this?
Hi
I really thankfull and appreciate the great efforts you made by developing this calendar. I am using you calendar in my app. I am having problem with "end time" drop down menu.
I am using 24 hrs calendar with half an hour time slots. When i create evenst at 28th March 2010, the end time drop down display times (00:00, 00:30, 02:00, 02:30 to 00:30,01:00) . you can see 1am is missing because 28 March is daylight saving day in UK. Therefore it does not display events on corrects time slots.
Please see issue 21 @ old google code repository
When I create a calendar where 3/14/2010 is the first day of the week, all times are off by 1 hour for that first day, starting at 2 AM. So if I have a 30 minute event starting at 1:45 AM, it will say that it's going from 1:45 AM to 3:15 AM. If I move an hour event to the 10 AM slot, it will say that it is going from 11 AM to 12 PM.
The times for the 14th that are returned from getTimeslotTimes do not include anything for 2 AM. I have 4 intervals per hour set and I get 1 AM, 1:15 AM, 1:30 AM, 1:45 AM, 3 AM, 3:15 AM...11:30 PM, 11:45 PM, 12 AM, 12:15 AM, 12:30 AM, 12:45 AM.
The rest of the days for that week are fine.
I was using version 1.2.2 and also tested this with you latest version from March.
If I go to your demo at http://robmonie.github.com/jquery-week-calendar/weekcalendar_demo_2.html, the first day of the week becomes March 13, 2010.
When an event with a start time date that's different to the end time date is returned, the event doesn't show on the calendar. Also, there doesn't seem to be a way of creating a multi-day event by dragging across multiple days.
Thanks!
I am using the latest jquery week calendar code as of yesterday. webkit works and FF and chrome but conks out on IE7. did not try IE 6 or 8. but odd...error is shown below:
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Mon, 24 May 2010 03:31:27 UTC
Message: Expected identifier, string or number
Line: 1436
Char: 4
Code: 0
URI: .../static/js/jquery.weekcalendar.js
Message: Object doesn't support this property or method
Line: 140
Char: 17
Code: 0
Hi, i'm using the below code to get data from the databse, it works perfectly on Linux OS's but does not work at all on windows, i've checked many browsers on Different Os's and its only windows that seems to have an issue.
Could anyone shed any light on this?
Thanks in advance,
Josh Burley.
while ($r = $db->fetchRowAssoc()) {
$r["free"] = false;
$row[] = $r;
}
$db->nextResult();
$row2 = array();
while ($r2 = $db->fetchRowAssoc()) {
$r2["cantResize"] = true;
$row2[] = $r2;
}
$db->closeResult();
$db->closeConnection();
$d = array('options' => array('defaultFreeBusy' => array('free' => true)), "freebusys" => $row, 'events' => $row2);
echo urldecode(stripslashes(json_encode($d)));
}
I have used many option and they all work , but I tryed to put businessHours option but it not work, is my syntax correct ?
businessHours: [{"start": 8, "end": 18, limitDisplay: true}]
I also try : businessHours: [{start: 8, end: 18, limitDisplay: true}]
I upload a zip file with test files : http://www.mediafire.com/?0d9lc482n1he7ed
Thanks !
When I clic 'Save' in the window presenting the date and comment in the form, the window dissapear and also the event (previously displayed while I set the params in the form) disappears too.
I cannot set a new event or modify any
This seems to be linked with the latest version of Opea (maybe others ?)
in the code JS, the calEvent.start = new Date(startField.val()) does not seem to work
regards
Hello, how are you?
Today I was beginning my work in this jquery-week-calendar (1.2.2) and I found a problem with "October" dates (in all demos). When arrive in "Oct 15" the date is repeated several times. The problem happen only in "October", every year.
I was thinking and probably happen because of the "daylight savings".
I'd didn't seen it:
#2
Could you show the final solution?
The solution presented has bugs, when you apply them the "next" and "prev" function don't work correctly and also after the change the "function" ignore "firstDayOfWeek" option, ever the first day is Sunday;
1 - The calendar open viewing "full work"
2 - Click in 1 day (or other option)
3 - In toolbar show "Sep 05, 2011" but in Calendar "Sunday Sep 04, 2011".
4 - If you click in "next" (in this case) nothing will happen;
5 - If you click in "prev" show in toolbar "Sep 03, 2011" but in Calendar "Sunday Aug 28, 2011";
Thanks.
Gustavo
Hi everybody
I use week-calendar with daysToShow = 11,
start and end parameters are setting to filter every 7 days.
I tested with 2 day and everytime start and end parameters filter for 7 days.
What's it wrong?
Is a bug??
it is not possible to add correct events for March 21- April 02. Created event date is substracted by one week. (e.g. by creating event on March 31 calendar shows "Start: Thu Mar 25 2010 17:45:00 GMT+0200 (FLE Standard Time)" ).
This also occurs in demo: http://robmonie.github.com/jquery-week-calendar/weekcalendar.html.
Tested on March 21s, 2010. Local time GMT +0200
Could there be an option to display the event body on the main calendar page
If you set 'H:m' as timeFormat in the full_demo example, time will not be displayed correct. It`s allways 10 past full hour.
I`ve take screenshots, first is with default time format, second with H:m set.
http://img217.imageshack.us/i/correctd.png/
http://img844.imageshack.us/i/bugyi.png/
Hi!
Here's a new one, to me at least. In Internet Explorer only, of course. All versions.
If I have en event that is longer than the displayed hours on the scroll bar, it pops UP, until the bottom of the even is aligned with the bottom of the scrolled calendar, the header disappears above the top of the calendar.
For example, if my calendar is tall enough to display 4 hours, and the event is six hours long, when the event is clicked on, the bottom of the event suddenly aligns with the bottom of the calendar, while the header is two hours up, off of the screen.
Has anyone else seen this?
CODE
data : function(start, end, callback) {
t_start = 'need start time'; //<-problem here. What am I filled?
t_end = 'need end time'; //<-problem here. What am I filled?
t_title = 'need title'; //<-problem here. What am I filled?
t_body = 'need body'; //<-problem here. What am I filled?
$.post("weekcalendar_update.asp", {
start: start.getTime(),
end: end.getTime(),
w_body: t_body,
w_title: t_title,
n_id: id,
w_start: t_start,
w_end: t_end
},
function(result) {
if (result != null) {
// alert(result.toSource());
for (i in result) {
var calEvent = result[i];
calEvent.userId = parseInt(calEvent.userId);
}
}
var calevents = result;
callback(calevents);
}, "json");
}
I can write something to the database. but data is wrong
Please help me...thanks
Hello
I would like to know how to create few events in the week ? I would like to create a periodicity for an event and when the user fill this information, the event is repeated in the week.
I have took the jquery-week-calendar from themouette and in the /full_demo/demo.js, I add this after the line 59 :
id++;
calEvent.id = id;
calEvent.start = new Date(startField.val());
calEvent.start = calEvent.start.setTime(calEvent.start.getTime() + 86400000);
calEvent.end = new Date(endField.val());
calEvent.end = calEvent.end.setTime(calEvent.end.getTime() + 86400000);
calEvent.title = titleField.val();
calEvent.body = bodyField.val();
$calendar.weekCalendar("updateEvent", calEvent);
and when I create an event on 5th July, it brings forward to 6th July
Hi,
Is it possible to view the weekly calendar in differnt timezones using PHP.
Any code example will be highly helpful.
Ideally there should be a drop-down of different time zones to view the calendar in.
Thanks,
Rashid
Can we disable add new event function only for past date?
I have a working implementation of the calendar pulling from several different data sets. However, I need to be able to set the readonly flag based on which data set is being displayed. Currently the calendar is either completely read only, completely writable, or individual events can be read only.
Anyone get this feature working? I've spent the past 8 hours at work trying to do only this.
Thanks in advance.
Hello I would like to know how can I get in an array or whatever, all the calEvents, that I create on the client.
Can any one help me please?
Thanks, Ramón.
"return Date.parse(d) || new Date(d)" returns NaN in IE8 if d is "2009-05-03T14:00:00+10:00"
There seems to be an issue when we try to use a multiday from saturday to sunday. The source-code says
while (start.getDay() < endDay) {
which does nothing when endDay is a sunday - endDay will be 0 and thus the loop will never be performed, because none of the other days is more less than 0.
Hey
I'm running into an odd issue with Internet Explorer 7 and 8.
Basically, after events were created, the user browses away from the page and then comes back both browsers do not request the fresh information but use the chached stuff from previous. Only after cleaning the internet data the browser requests the data endpoint again and displays the events.
I can provide a login to check it out yourself.
Hi!
When I fly two events on the same line, I can switch the "z-index" three times. There was then more modifications. (Unless you move the event)
I do not think this situation is desired. I located the trouble in the "_adjustOverlappingEvents" but I can not fix the trouble.
By the way, super project. Really customizable!
(Sry for my english :S)
Hi,
There used to be an old forum when support for this project was hosted on redredred.com.
It had a LOT of really good information on it.
Where can i find that old info?
Pete
Hi I am starting with jquery and I want to use this calendar but carrying my events from a database, for this demo I put the calendar on a page and then I edited the file by modifying the method getEventData demo.js where I have added a ajax function calling a php file that queries the database and bring the events, the data I see that brings me but from here and do not know how to assign my variable response below to return there instead of Sample loading events that bring mine loaded database. can someone help? this is my code:
function getEventData() {
var year = new Date().getFullYear();
var month = new Date().getMonth();
var day = new Date().getDate();
$.ajax({
url: 'consulta.php',
type: 'POST',
success: function(respuesta){
alert(respuesta);
}
});
return {
events : [
{
"id":121,
"start": new Date(2011, month, 14, 12),
"end": new Date(year, month, 14, 14, 30),
"title":"jorgito"
},
{
"id":1,
"start": new Date(year, month, day, 12),
"end": new Date(year, month, day, 13, 30),
"title":"Lunch with Mike"
},
{
"id":2,
"start": new Date(year, month, day, 14),
"end": new Date(year, month, day, 14, 45),
"title":"Dev Meeting"
},
{
"id":3,
"start": new Date(year, month, day + 1, 17),
"end": new Date(year, month, day + 1, 17, 45),
"title":"Hair cut"
},
{
"id":4,
"start": new Date(year, month, day - 1, 8),
"end": new Date(year, month, day - 1, 9, 30),
"title":"Team breakfast"
},
{
"id":5,
"start": new Date(year, month, day + 1, 14),
"end": new Date(year, month, day + 1, 15),
"title":"Product showcase"
},
{
"id":6,
"start": new Date(year, month, day, 10),
"end": new Date(year, month, day, 11),
"title":"I'm read-only",
readOnly : true
}
]
};
}
Hi,
Great weekly cal that you've built up. Thanks so much for your efforts.
We're having a problem with events not successfully moving to a new location when dragged, instead they are going back to their previous date and time.
We grab an event and drag it to a new location, but it just doesn't stick.
It seems to happen randomly, we can't really figure out a pattern. Possibly larger moves are a problem, also moving events to the right on the page seems to be a bit worse.
We've tried this out in firefox and safari for the mac.
further research turns up that the full_demo version seems to work ok, just not the demo in root of the folder, or the demo on github
After digging into the code as far as I could I found there really is not a basic structure setup to do a PER timeslot div at all since there is Timeslots and Columns stacked upon each other, things dont like to play nice. So what I had to do is create it using sort of the same code that is used for the create an event by dragging, but hacked it up a bit. It seems to work perfect on the first calendar view but soon as I click the next view like Day, 3 Day, Work Week, Full Week it does not work anymore. The biggest problem arose is with the columns and time slots setup so the first bit is to accommodate for the hovering over new columns, 2nd is for staying in the same column and having it check the actual mouse location corresponding to the time slots location. Any Ideas on how to tweak this to work in all calendar views??
$('.wc-full-height-column').hover(function(event) {
$('.wc-cal-event_hover').remove();
});
$('.wc-full-height-column').mousemove(function(event) {
timeslotHeight = $calendar.weekCalendar("option", "timeslotHeight");
var column = $(this);
var HoverID = $(".wc-cal-event_hover");
var HoverHTML = $('<div class=\"wc-cal-event_hover\"></div>');
column.append(HoverHTML);
var columnOffset = column.offset().top;
var clickY = event.pageY - columnOffset;
var clickYRounded = (clickY - (clickY % timeslotHeight)) / timeslotHeight;
var topPosition = clickYRounded * timeslotHeight;
HoverID.css({top: topPosition});
if(clickY > topPosition){
HoverID.show();
}else{
HoverID.remove();
}
});
Events added immediately disappear when using IE 8. Clearing cache does not help. This does not occur with any other browser.
I creted 3 buttons on switch display:
When the users click on the buttons 1 or 5 days, everything works fine, but when the button 3 days is clicked the calendar displays a bigger range date in comparison of the days on the calendar.
Let's supose, today is Feb 2nd. if I press the button 3 days the calendar will display the columns with days 2nd, 3rd and 4th but in the column title will appear 2 Feb 2012 - 6 Feb 2012.
I'm using date Format "d M Y" and I have the following configurations on my calendar
daysToShow : 3,
switchDisplay: {'1 dia': 1, '3 dias': 3, '5 dias': 5},
I find a bug, when i try to delete a multiday event, plugin dont erase the other elements from calendar with that ID deleted.
So i did something like:
var events = $calendar.weekCalendar("serializeEvents"); // get all events
for( var a=0; a < events.length; a++ ){ // covers all events
if( events a ].id == event.id ){ // if the ID of event is the same, i looking, delete again
$calendar.weekCalendar("removeEvent", event.id);
}
}
And btw, awesome plugin, ty!
I want to add an event witch start for ex. at 10am on Monday and End 3pm at Friday.. is it possible ?
I what to know if there is any way that i can allow the events to leave the calendar, the idea is to have a bucket of events pre constructed to be assigned to a timeslot.
Thanks in advance
Hi,
i want to create a function (like 'nextWeek' and 'prevWeek') for go to 'nextDay' and 'prevDay', but how? :(
Sorry for my bad english, and thank's for the help!
Hi,
i am using this as an event calendar for users. The users can make an appointment for the future days. How can I disable the past days that nobody can click & add an event?
Thank you,
I am pulling data out of a database and then formatting the data to fit in the necessary string for Week Calendar using a function for the "data:", but the problem is that it seems that the calendar renders before the data function completes, so the events will only show up after hitting the next or previous week buttons. Is there anyway to make sure that the script is done running before the calendar renders?
Thanks for your time,
-Shmythe
there is a body textarea in popup box when creating an event, but doesnt show in the event once created, and
similarly, there is no body showing up once i add event data in function getEventData()??
how do i solve this problem? thanks
Hi All adn sorry fr my english,
I think that I have found a little error on function _addDroppableToWeekDay where top calcutations are done.
Actual code only uses ui.position.top to calculate the time slot to drop the new element but not the scroll of wc-scrollable-grid. This causes that all events are placed starting at 00:00.
I have made a little change to prevent this, next my code:
var headerHeight = self.element.find(".wc-header").outerHeight();
var navHeight = self.element.find(".wc-nav").outerHeight();
navHeight = navHeight == null ? 0 : navHeight;
var $scrollable = self.element.find(".wc-scrollable-grid");
var top = ($scrollable.scrollTop() - (headerHeight + navHeight)) + Math.round(parseInt(ui.position.top));
var eventDuration = self._getEventDurationFromPositionedEventElement($weekDay, $calEvent, top);
I am using v 1.2.2 and with this change I put correct my event when I drop it over weekcalendar.
I tried with ver. 1.8.18 - almost nothing shows up.
Probably a minor issue...
Hello, i am wondering if it is possible to make it only a pure week schedule, a fixed one. Means no week is different than the other, so years and month are basicaly irrelevant.
Thanks for the answer. Bye!
I know that is stupid what i gone ask but just hopping....
I love this calendar, is awesome.
Implemented into a project but my customer want also month view. Is possible?
I were using previous version of this plugin and i found that the event/agenda drag and drop not working in IE , after reading the forum i found that this bug is reported and fix in next release of this plugin but unfortunately when i upgrade the plugin's core files it didn't fix the issue locally (although its example is working gr8 in IE ) but locally when i "hold my mouse on the agenda to drag, its move slides to the right or left and then when i click again to hold it come back to its previous position"
i have 2 tabs 1. daywise 2 all days
in all days the drag and drop is working fine.Only issue occurring in Day wise....
can anyone plz let me know the quick fixes since there are people who faces the similar issue while using old version and now happy when they upgrade to latest version................... plzz guys help me out
Uncaught TypeError: Cannot call method 'getFullYear' of undefined
on line:
var midnightCurrentDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
and im guessing this is the first of many errors regarding this.
What ive done is added the week-calendar code to my jquery ui js file so its all together and im getting errors.
Hi there,
first of all: I tried loads of calendars BUT THIS IS DEFINITLY THE BEST of all. Great work.
But for now, I'm stucking. I tryed to create some recurring events, as it is described like here:
http://www.packtpub.com/article/calendars-jquery-1.3-php-jquery-week-calendar-plugin-2
Thats not a real problem, but I ran into the summer/wintertime problem :(:( And I have no Idea how to fix.
For example, if I add a recurring event which reaches over the wintertime into the summertime, and it shoukd start at 9am, in summertime it'll start at 10am :(
Can anyone help me to figure out how to handle this?
rgrds
Tom
e.g: if client is currently UTC-4, but dates are stored and returned in UTC, all dates calendar events are displayed four hours later than in intended. Constructor might need a timeOffest option (defaulting to new Date().getTimezoneOffset() and ability to handle dates returned from the server with offset identifiers.
Hello,
I want to display tooltips to overview of events. For that, I thought qTip or still wtooltip. The problem is that I can not make these plug-in JQueryWeekCalendar ... Do you know how?
Thank you in advance
it cant not run under the jQuery JavaScript Library v1.10.2
Hi,
I just start use Week calendar and i have same problem with load my event to calendar.
Why?
Because when one user have for example 10 000 event in data base the time to load event end display in calendar is to long!
I wont load event for current week but i don't now how can i send to my php script the date of first day for previewing week?
Do You have same suggest how can i do it?
I'm testing this behavior in version 1.2.0, I'm sorry I cannot test this in head, so please close the bug if it has already been fixed.
When switching to daylight saving time, calendar events won't be displayed and column day headers are wrong, only for that week. This is due to wrong dateFirstDayOfWeek calculation.
I created a quick workaround for this by changing the function _dateFirstDayOfWeek in the following way. I noticed that also the _dateLastDayOfWeek function is affected by a similar problem when switching from daylight saving time back to normal time.
I'm sorry I cannot produce a valid patch, I hope it can be useful anyway.
file jquery.weekcalendar, version 1.2.0, line 968
/*
* returns the date on the first millisecond of the week
*/
_dateFirstDayOfWeek : function(date) {
var midnightCurrentDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
var currentDayOfWeek = midnightCurrentDate.getDay();
var millisToSubtract = currentDayOfWeek * 86400000;
var dateTimeZoneCheck = new Date(midnightCurrentDate.getTime() - millisToSubtract);
// workaround for daylight saving time
if (dateTimeZoneCheck.getHours()==23) {
dateTimeZoneCheck = new Date(dateTimeZoneCheck.getTime() + 3600000);
}
return dateTimeZoneCheck;
},
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.