First of all I'm very thankful for any input. I'm not asking you to do this for me, I would just like to know your thoughts on the best way to approach this project. Please see the image below:
Apologies for it being in German, the important translations are as follows:
verfügbar = available
bereits reserviert = already reserved
Uhrzeit = time slot
aktuelle Woche = this week
and Mo, Di, Mi etc. are shortenings of the days of the week.
I'll quickly explain what it should do, because the picture doesn't really explain everything. It's basically displaying when "someone" is available throughout the day. The data would be pulled as JSON and displayed dynamically for each user and list two weeks. The week we're on, and the future week.
Anyway, I would literally just like to have your opinions on the best way of going about this. My initial thought was: Unix timestamps, find the time difference and convert that into pixels to use as a height for each div. But then it struck me that I wouldn't be able to find out where the div should start. (Maybe it starts at 10:00 like on the picture, how would I determine that)
I thought about doing this in canvas, however have very little experience of Canvas so I avoided that. Shout if you would recommend it though. I'm looking for the ideal solution.
Just to know what to learn would be a big help for me, and any input will be gratefully taken on board!
Thank you for your time,
Peter
Edit: Sorry I forgot to mention those things, thanks for pointing that out:
Reserved time data will also be pulled, the user can decide whether they are available or unavailable during that period of time. I'm not really sure how complicated it would be to have two bars on the same day. For example: unavailable from 06:00 to 12:00, but available from 12:00 to 18:00. So I'm avoiding that for the time being.
Time intervals are 15 mins. For each 15 mins 9px should/could be added to the height.
Thanks for your replies.
you could do it within a <table> and clever css styling... each <td> is 15 minutes and 9px height. the first and the last ones contain start / end time.
I had some similar requirements and solved it with tables and css after I checked out the demo of http://www.project-open.org/ where they used tables sometimes to display calendar / milestone data. Also, the Google Calendar uses tables: https://www.google.com/calendar/
This jquery-plugin might be worth looking at
https://github.com/themouette/jquery-week-calendar
looks like it uses a combination of table(s) and divs to do the layout
Related
I'm very new to this, but have a little programming background, so hopefully someone out there can parse through this with me.
I spend a LOT of time looking at Reddit for work and being able to quickly see which comments are newer than others would be super helpful. My ultimate goal is to have a color scale that will quickly guide me to the new comments. Something like Red is less than 30 minutes, Green is 30-60 minutes, and Blue is 60+ minutes or something like that.
I've been doing some research into building Chrome Extensions, and I found some similar topics, but they don't test the text in the field and update the CSS dynamically.
I would absolutely love some help walking through this. Also, if you have a partial solution, I'm open to that as well. Thank you in advance for your time and help!
UPDATE: I've been asked to provide code samples, but that's the real crux of my problem is I A) don't know how to even begin approaching this, and B) my web searching is not showing any results for me to play with. To be clear, I'm not asking anyone to make this extension for me. I'm looking for help identifying a CSS class area on a site, checking the text within it, and then applying a CSS addition based on results. If you can help point me to the right resources, I'd be very grateful!
I have been having some quiet days at work and schools out but I wanted to play around with javascript. I'm trying to figure out regular expressions and such. I may be starting out too complicated, I am not too sure.
How hard is it to parse through a table like so (http://gyazo.com/6dc7292f1113201fcc4fe8b5b9e79d7a) and gather the tides for each time of day? For example get the time of 01:45 and see the tide in m is 2.6.
I just want to know the basics of how to grab that variable. Of course tides change from day to day but for now I just want to practice on a static variable.
Thanks, and hopefully this makes sense! I am at the last 2 hours of my 10 hour work day lol!
That's not what Regular Expressions (shortened to Regex) is normally used for. Regex is to pattern match. like how to read a number if a user entered (808)854-3432 or 808-854-3442. I mean theoretically you could regex but it'd probably be 10000x more complicated then is worth it just to grab one table cell value. ideally you would want to grab the table body and then go through a tr and grab the td corresponding to the cell and parse the time. But looking at that sample table, you won't be having a lot of regular tables for "each time of day". It would go a long way to maybe show some work or what you formulated. I would also recommend code academy, khan academy or any other number of JS tutorials to start, if you haven't already.
Could anyone recommend me a good time day (only the name - ex:Monday) and time range picker..
I already tried http://pttimeselect.sourceforge.net/example/index.html and http://haineault.com/media/jquery/ui-timepickr/page/
but they don't have day selection..
anyone knows another one?
I really like this one: http://ghusse.github.com/jQRangeSlider/
It's highly customizable. Supports Dates, Integers and has a lot of options to fit it to your special needs.
I seriously spent hours looking for something similar for our site ParkMe.com. It seems with all the implementations someone out there would have created one.
When I couldn't find anything, I spent the weekend writing my own. Here's what I came up with.
http://keithhackbarth.github.io/jquery-datetime-picker/
https://github.com/keithhackbarth/jquery-datetime-picker
Not trying to self plug.. just think I came up with a half decent solution.
I am working on a project to create an energy cost/savings calculator for a client. I have been writing it in pure JavaScript so far, but am more than happy to use jQuery where necessary. I'm still starting out learning the language, so I apologize in advance for any bad practices, egregious errors, or simple mistakes.
There are two requirements:
The user can input their energy use information, and see how much they will save by using the client's product (I just have the input so far, am planning to use those returned values to output the savings later)
The numbers animate in some way when they are presented.
For the animation, I'm just going with the number counting up or down from its current position. My problem is I'm absolutely stuck with how to achieve this. I'm told that I want to use a timer on a recursive function that either increments or decrements the displayed number based upon the old value versus the newly input value.
So when the user selects a number, the display will count up to that number from zero with a space of, say, ~300ms between each change. And if they select a different number, it will count up or down.
Here is a link to the live page. For some reason the selected number doesn't show up in the DOM in the jsfiddle version. Here is the .js file.
I would very much appreciate any help to nudge me out of my little rut. As I said, I'm still in the baby stages of learning JavaScript, so I can't quite think fluidly in the language yet. Thank you in advance.
this may be enough to get you started:
http://jsfiddle.net/pLJU6/
var number = 0;
var div = $('#numberDiv');
var incrementNumber = function () {
div.text(number);
number++;
setTimeout(incrementNumber, 300);
};
incrementNumber();
I was wondering if anyone has any ideas, or has stumbled upon a script that will recognize portions of dates and times in any given field of text.
For instance, this sentence right here was being typed at 4:24pm and I suspect I will finish it at about 4:25 or so.. perhaps even later on the 19th.
I would like to be able to make a live listener that will pick out those times above (or guess) and surround them in a link to say... /calendar/events/create/TIMESTAMP
I expect regex could be used to find certain indicators like : or th, or anything like that and take a guess at the rest pending the current time..
Macs do this in mail and icalendar.. pretty cool. Thoughts or ideas would be greatly appreciated!
Have a look at date.js library which supports wide variety of formats.
Even with this library you will need to:
Preprocess the text (like removing dots at the end of sentences, removing whitespaces, ..)
Filter out false positives (it can parse th as thursday, say as saturday, etc).
Create algorithm for effective scanning of the text.
Map the found times/dates back to the text, etc.
So there is still a lot of work to do.
To see a very ineffective demonstration of the parsing have a look HERE.