|
CSS - Google Calendar Type Calendar
Hi all.
I wonder if anybody can point me in the right direction. I want/need to make a calendar that looks very similar to the google calendar's month view. So, basically I need to span multi-day events over the days that they appear (mainly for readability). The calendar reads all the event information from a database, with data entry being on a different part of the site and independent of the actual calendar display. I don't need any fancy drag and drop scripts, or AJAX type things for it either. I just want to know how I can do the same spanning effect as google calendar does. I assume it will only involve html and css (Don't see how javascript would come into the equation) Oh, and if somebody has already posted a solution, i'm sorry for reposting, I'm not really sure what search terms to actually use for this If you know how to do it, or can point me in the correct direction, please do so. Thanks in advance Similar TutorialsI have two questions related to modification of a Plans Calendar! Are my problems my css modifications or my lack of understanding of perl? I want to make a seven day calendar into a five day calendar, displaying only Mon - Friday. The calendar can be seen at www.doldaycare.com (my kids' daycare center) In plans/theme/style.css, i make my changes like below. The result is great for the change related to Quote: .day.saturday, .day.sunday { display:none; Saturday and Sunday only stop displaying as desired. My problem is that the words Saturday and Sunday still display such that the table cell for Monday has Sunday as a header, Tuesday has Monday as a header, etc. This bring me to changing the other css class (correct term?) related today_names. All of the table cell properties for all days stop displaying when I try: Quote: : /* td.day_names, sunday { display:none; } */ Instead I just want Saturday and Sunday to stop displaying. Is my css incorrect? Here is my css as modified Code:
td.day_names { /* used for Sunday, Monday, etc.*/
color:#000;
font-weight:bold;
font-size:small;
font-style:italic;
text-align:center;
background-color:transparent;
border-style:solid;
border-width:0px;
border-color: #000;
margin:0px;
width:14%; /* -- modified from orginal 150px --this line makes each calendar cell at least a certain width */
}
/* td.day_names, sunday {
display:none;
} */
.day { /* used for calendar cells*/
background-color:#fff;
border:solid 1px #333;
padding:0;
padding-left:2px;
padding-right:2px;
width:11%;
font-size:small;
font-weight:normal;
vertical-align:top;
height:2px;
}
/*.day.saturday, .day.sunday {
display:none;
}*/
I believe that the key part of the perl.cgi related to the html display is: Code:
# print day names
$return_text .=<<p1;
<table class="calendar">
<tr>
<td class="day_names">$weekday_sequence[0]</td>
<td class="day_names">$weekday_sequence[1]</td>
<td class="day_names">$weekday_sequence[2]</td>
<td class="day_names">$weekday_sequence[3]</td>
<td class="day_names">$weekday_sequence[4]</td>
<td class="day_names">$weekday_sequence[5]</td>
<td class="day_names">$weekday_sequence[6]</td>
</tr>
p1
where @weekday_sequence = @day_names; I know I've seen it somewhere, but I can't seem to find it anymore. If someone could tell me of a site that has a calendar made using a CSS layout only (No tables), I'd appreciate it. I want to see the code, because I figure it'll be a good lesson in CSS layout. Thanks in advance. I was wondering how to layout a calendar in CSS. One of the ones you see everywhere, usually done as tabular data that has boxes for each date and are laid out 1 2 3 4 5 6 7 8 9 10 etc etc... Again I have arrived with yet another inquiry regarding tableless layouts. I have been tasked with the creation of a fairly complex calendar application. Creating this using tables would be no problem for me, but I am wondering if this is what I should be doing. I remember hearing that you should only display "tabular data" using tables, which would imply that I should be using divs and the like to create this app, not tables. Does anyone have any resources that specifically tackle the task of creating a calendar using CSS techniques? I feel that I could do it, but I just need a basic approach to get me started. The biggest issue I am having is regarding the days dropping down to a new "row" after seven boxes have been displayed. I can provide no code, obviously, since I haven't started yet. I'm just merely looking for some insight. Thanks in advance! Hi, I need help with formatting a calendar using CSS. Here's a list of the goals I'm trying to achieve: The day numbers are positioned in the top right corner of the cell. The event text is centered both vertically and horizontally within each cell. The day number doesn't affect the centering of the event text (i.e., it's as if it has zero width). I need to be able specify a minimum width and height for the cells. I have a png of the effect I am trying to achieve, but unfortunately I can't post it being a brand-new member. If seeing it would help, let me know and I guess I can PM the url to you. Update: Here's the link to the png: Code: http://tapestryfolkdance.org/images/calendar.png Below is what I've tried. However, the event text is not centered vertically within each cell, and the first couple of events are not centered horizontally in the cell. It is fine if the event text overlaps with the day number. Code:
<html><head><style>
table { text-align: center; border-style: solid; border-width: medium; border-spacing: 0px }
td { border-style: solid; border-width: thin; border-color: black; }
.day {
margin: 0px; text-align: center; font-style: bold;
border-style: solid; border-width: thin; border-spacing: 1px;
font-size: large; color: black;
float: right;
}
td {
text-align: center; color: black; font-size: small; min-width: 60px; min-height: 120px;
vertical-align: top;
}
</style>
</head><body>
<table>
<tr>
<td>
<div class=day>2</div>event 1<br></td>
<td>
<div class=day>3</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>4</div>event 1<br></td>
<td>
<div class=day>5</div>event 1<br>event 2<br>event 3<br></td>
<td>
<span class=day>6</span>event 1<br>event 2<br>event 3<br></td>
<td>
<span class=day>7</span>event 1<br>event 2<br></td>
<td>
<div class=day>8</div>event 1<br></td>
</tr>
<tr>
<td>
<div class=day>9</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>10</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>11</div>event 1<br></td>
<td>
<div class=day>12</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>13</div>event 1<br></td>
<td>
<div class=day>14</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>15</div>event 1<br>event 2<br></td>
</tr>
</table>
</body>
</html>
Ok. I've got a calendar all set up, and it displays properly in its frame in Firefox. using firefox, try the following link: http://www.kennedygallery.org (click events calendar) in IE, the whole thing is right-justified or centered or something. Since I discovered the problem, I even started putting redundant declarations in the calendar's style sheet: Code: body {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background : #FFFFFF ;
color : #505458;
margin: 0px;
margin-left: 10px !important;
width:590px !important;
}
.maintable {
position: absolute;
left: 10px !important;
margin-top: 0px;
margin-bottom: 0px;
margin-left:0px;
}
etc, etc. So is there a positioning bug or something that I have to work around to make it display as it does in Firefox? Thanks, Perry. I have a style sheet which creates a calendar which is hooked up to a recordset. Like a blog calendar. My problem is on months that seem to have more data then others the calendar table pushes the page or the table therefor creating problems. Here is my CSS, is there a way to lock the table so if data population does occur it doesnt knock everything out of wack? Thanks so much for any help you may offer. Steve /* CSS Document */ table#calendar { font-family:Verdana, Arial, Helvetica, sans-serif; } table#calendar caption { font-size: 10px; font-weight: normal; } table#calendar a { text-decoration:none; } table#calendar tr#days th { font-size: 10px; color: #000000; background-color: #FFFFFF; font-weight: normal; padding: .3em 1px; } table#calendar tr#title th { font-size: 10px; background: White; color: Black; font-size: 10px; border: 0px solid #224; padding-top: 0.3em; padding-left: 0.3px; } table#calendar td { font-size: 10px; width: 30px; color: #000000; text-align: right; border: 0px solid gray; border-color: FFFFFF; vertical-align: top; } table#calendar .day7 { border-right: 0px solid #FFFFFF; } table#calendar td a { font-weight: normal; display: block; margin: 0; padding: 0px; width: 30px; } table#calendar th a { font-weight: normal; } table#calendar a:link {color: 0000CC;} table#calendar a:visited {color: 0000CC;} table#calendar a:hover { background: Silver; } table#calendar .day1, table#calendar .day7 { background: White; } table#calendar .blank { background: White; border: 0px solid #; border-right: 0px solid #99A; } table#calendar .lastweek td { border-bottom: 0px solid #AAB; } table#calendar .today { background-color: #A3AEB0; border: 0px solid black; } What've I done wrong...? See what's happening with my calendar he tuirennhurstfield.com/calendartrial.php In IE8 the SUN & MON columns are replacing columns FRI & SAT and are pushing TUES-SAT down a level so they are below... This seems to only be happening in IE8, works fine in IE6, IE7, Safari and Firefox... I purchased this script and the script worked fine in IE8 on the demo (see he codecanyon.net/item/smooth-php-calendar-reloaded/full_screen_preview/105891 ) I've clearly edited something wrong in the CSS when I was making it work with the visual look of my site... But I'm not sure what I'm looking at, and the original developer has given me the sterling advice of "check your css" If you can help at all please let me know! Thanks!!! please close thread I am try to make a page that is similar to outlooks calendar page for a day. The page would have a scrollbar that scrolls from 12am to 12am(next day), but the initial position is 8 am instead of 12am. I can set an anchor and make sure the page opens to that anchor, but it is an awkward solution and might cause some linking problems. Anyone know who to do this? If i want to use the strict DTD, is there an alternative to the target attribute on the <a> link which you are no longer allowed to use? <div type="test"> I am interested in the type attribute. The reason is this... I have a Janus GridEx on my asp.net form and I want to add some css styles to it. There is no ID defined, nor a class of which I can inherit. I can't modify the code for this tag so I was hoping I could use the type attribute to identify this div in my css.... This is the code for the DIV I'm talking about: Code: <div type="4" style="position:relative;padding:0px 0px;width:100%;overflow-x:auto;overflow-y:auto;"> Anyone has any experience with this? Thanks! Hello, I have a perl script, and would normally do this with tables, but since tables are such a BAD THING ™ I've been trying to this with CSS, and I've spent too long on it thus far, so I'm looking for a bit of an assist Code: +----+-------------+--------------+ | id | date 1 | date 2 | | | | | +----+-------------+--------------+ what's the best way to accomplish this? --Ax Hello. I'm trying to do this: Code:
input, textarea, select { COLOR: #000000; FONT-FAMILY: Verdana, Arial,
helvetica; FONT-SIZE: 10px! important; border: 1px #000000 solid;
}
input[type=radio] {COLOR: #000000; FONT-FAMILY: Verdana, Arial,
helvetica; FONT-SIZE: 10px! important; border: 0px #000000 solid;}
input[type=checkbox] {COLOR: #000000; FONT-FAMILY: Verdana, Arial,
helvetica; FONT-SIZE: 10px! important; border: 0px #000000 solid;}
But my checkboxes and radiobuttons still has a black border. WHY!? I include two diffrent css-files in my webpage. And "input, textarea, select" is set again in the second css-file. The reason for that system is that the second css-file is diffrent depending on what design the user has chosen... Is that a problem? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> I've tried several differnt doc types, but all of them prevent my left menu items' text to change colors when you hover over the text. Is this common? Is it my code? You'll also notice the 2 pages below have some general layout css issues, like too much white space above the grey line AND though they both use the same right bar (I uses a PHP include) the format is different in both. The green line is the toughest...it won't extend the height of the page. Any ideas? I attached my style sheet as well. thanks. http://bowtree.org/latest/luminaries.php http://bowtree.org/latest/index.php I am having no luck using this rule to set text with-in the body tags correctly. body{font-family: sans-serif; font-size: 11px; color: #CC0000} This line will set the color and family of the text but it doesnt effect the typeface's size or any other parameters either. I have tried both pt's and px's but no luck. When I use the <span> configuration for text all is fine. But when I use a rule as above something doesn't work. Any ideas? Thanks Hi, I am trying to have different type of lists on the same page by using different CSS. Basically I want to define a general list to be used through out the whole website, and another list to be used only within a box. I wish that the list in the box does not contain the bullets. However setting the list-style-type: none; is not working as sugested in the following link: http://css.maxdesign.com.au/listutorial/02.htm Here is my code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
ul{
list-style-type: none;
padding: 0;
margin: 0;
}
li {
background-image: url(bullet.png);
background-repeat: no-repeat;
background-position: 0 .8em;
padding-left: 1em;
line-height: 14pt;
}
div.box{
border: 1px solid red;
}
div.box ul{
list-style-type: none;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
<div class="box">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>
</body>
</html>
Thanks for any sugestions, best regards, Sim085 So far I've been unable to find the answer to this question despite numerous Google searches, and am sincerely hoping someone here can give me the definitive answer. I have an unordered list which requires use of the decimal-leading-zero list style type. However, I need to start the number at 00 instead of 01. In HTML the way you do this is to put inside the UL tag start="0", but this is not validatable, and actually deprecated. How can I begin a list with 00 rather than 01 for the decimal-leading-zero list-style-type? TIA for all help and advice. Does anyone know any particular libraries that would allow me to create a menu like: www.ge.com or www.buell.com I want to have a list of images appear and was hoping there was some free code out there rather than having to reinvent the wheel. Thanks, -Nate |
|||||||