Solved

Adjusting the position of a Javascript Calendar

Posted on 2007-11-30
2
2,835 Views
Last Modified: 2013-12-24
I am using this calendar (http://www.dynarch.com/demos/jscalendar/) to pass events to a Coldfusion page.

The calendar for my site is located here: http://www.barreport.com/publicsite/viewevents/jscalendar2.cfm

You click on a date and it shows the events for that date.

Now, my only issue is a stupid one, I would like to place the calendar into the table that's displayed on the link above. The only thing is that it's a royal pain in the ass to simply move the calendar and place it into the table.

I've read the documentation, but, I still cant seem to move the calendar around.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>view events JSCalendar</title>
 
<!---Calendar JS--->
  <!-- main calendar program -->
  <script type="text/javascript" src="../../Scripts/jscalendar-1.0/calendar.js"></script>
 
  <!-- language for the calendar -->
  <script type="text/javascript" src="../../Scripts/jscalendar-1.0/lang/calendar-en.js"></script>
 
  <!-- the following script defines the Calendar.setup helper function, which makes
       adding a calendar a matter of 1 or 2 lines of code. -->
  <script type="text/javascript" src="../../Scripts/jscalendar-1.0/calendar-setup.js"></script>
<link href="../../Scripts/jscalendar-1.0/calendar-win2k-1.css" rel="stylesheet" type="text/css" />
<!---END OF Calendar--->
 
</head>
 
<body>
<table width="100" border="1"  >
  <tr>
    <td id="calendar-container">
	<script type="text/javascript">
  function dateChanged(calendar) {
    // Beware that this function is called even if the end-user only
    // changed the month/year.  In order to determine if a date was
    // clicked you can use the dateClicked property of the calendar:
    if (calendar.dateClicked) {
      // OK, a date was clicked, redirect to /yyyy/mm/dd/index.php
      var y = calendar.date.getFullYear();
      var m = calendar.date.getMonth();     // integer, 0..11
      var d = calendar.date.getDate();      // integer, 1..31
      // redirect...
      window.location = "calendarEvents.cfm?eventDate=" + (m+1) + "/" + d + "/" + y;
	  
    }
  };
 
  Calendar.setup(
    {
      flat         : "calendar-container", // ID of the parent element
      flatCallback : dateChanged           // our callback function
    }
  );
</script>
	
	
	</td>
  </tr>
</table>
 
 
 
 
 
 
</body>
</html>

Open in new window

0
Comment
Question by:meechp123
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 8

Accepted Solution

by:
pmascari earned 500 total points
ID: 20386658
Looks like youl need to open the CSS file that is here:
http://www.barreport.com/Scripts/jscalendar-1.0/calendar-win2k-1.css

Check out the first entry in that file::

.calendar {
      position: relative;
      display: none;
      border-top: 1px solid #fff;
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
      border-left: 1px solid #fff;
      font-size: 9px;
      color: #000;
      cursor: default;
      background: #d4d0c8;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      left: 62px;
      top: 187px;
}

Experiment with the "left" and "top" values to position your calendar.
0
 

Author Closing Comment

by:meechp123
ID: 31412014
I cant believe I missed this. I need to go to bed. :)
0

Featured Post

Don't miss ATEN at NAB Show April 24-27!

Visit ATEN at NAB Show to learn how our "Seamlessly Entertaining" solutions deliver fast, precise video streaming without delays for the broadcasting and media environment. ATEN will showcase its 16x16 Modular Matrix Switch (VM1600) and KVM Over IP Solution (KE6900 series).

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
bootstrap wrap text 1 36
Accordion won't close correctly 5 14
Javascript: Range object 16 15
Diff of the day 2 10
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question