asked on

Create a schedule bar in asp

Hi, all,

I have to create a scheduler for a project in ASP. For example, if I have to do a inspection at July. 15, I can do it 30 days before or after that day, so the range is June, 16 ~ Aug, 14(like a row in a table). I need to create a bar from June,16 to Aug, 14, with the scheduled date July, 15 and a small image in the middle of the bar . the image can be dragged and moved within the time range, and when the image is moving, there is a popup menu show the day changing within the range.
So, in the example above, if I mvoe the image to left, the popup menu will show me maybe July.,2, if I click the "OK" button, the new schedule will be stored in database.

I don't know if I describe my problem clearly.

Do you have any idea or example can give me some idea? if you have some sample codes, that's best.

Thanks!!!!

peterxlane

This is a pretty big undertaking. At a bare minimum, you need to be able to dynamically create a calendar based on the results of a database query. Many different samples of doing this are available online. From there, you need to be able to display the bars on the days (I would suggest using CSS to accomplish this). You will then have to deal with overlapping appointments and how to display all of them and differentiate between them. And then, on top of that, create JavaScript to accomplish some sort of "slider" capability to select the date and adjust the dates on the calendar accordingly.

Do you have any type of prototype or existing code?

mslcorp

ASKER

Thanks for your quick response.

Actually my real case is a little bit easier, I only have to count the month instead of the day. I just got a example like the following:

<OBJECT ID="fadeScroll" WIDTH=171 HEIGHT=21 ALIGN=CENTER
CODEBASE="http://activex.microsoft.com/controls/mspert10.cab"
CLASSID="CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D"
STYLE="filter:Alpha(Opacity=100, FinishOpacity=100)">

<PARAM NAME="BackColor" VALUE="&H80">
<PARAM NAME="ForeColor" VALUE="&H80000005">
<PARAM NAME="Size" VALUE="4516;318">
<PARAM NAME="Max" VALUE="100">
<PARAM NAME="Position" VALUE="100">
<PARAM NAME="LargeChange" VALUE="10">
<PARAM NAME="Orientation" VALUE="5">

</OBJECT>

<SCRIPT language="VBScript">

      Sub fadeScroll_Change()
            On Error Resume Next

            If fadeScroll.Value > 20 Then
                  fadeScroll.filters.alpha.opacity = fadeScroll.Value
            End If

      End Sub
</SCRIPT>

It looks good, but my boss seems don't like it, do you have some good idea? thanks again.

mslcorp

peterxlane

What about something like this:

<% @Language = VBScript %>
<html>
<head>
<title>Test</title>
<style>
.plaincell
{
FONT-WEIGHT: bold;
FONT-SIZE: 8pt;
COLOR: black;
FONT-FAMILY: Verdana, Arial;
BACKGROUND-COLOR: #C7C7C7;
FONT-VARIANT: normal;
TEXT-ALIGN: left;
}
.plaincellover
{
FONT-WEIGHT: bold;
FONT-SIZE: 8pt;
COLOR: black;
FONT-FAMILY: Verdana, Arial;
BACKGROUND-COLOR: orange;
FONT-VARIANT: normal;
TEXT-ALIGN: left;
cursor: pointer
}
</style>
<script language="JavaScript">
function changeCell(cell, cellsprior, mode) {
      if (mode == 'on') {
            cell.className = 'plaincellover';
      } else {
            cell.className = 'plaincell';
      }

      if (document.getElementById(cell.id).previousSibling) {
            if (cellsprior != 0) {
                  cellbefore = document.getElementById(cell.id).previousSibling;
                  changeCell(cellbefore, cellsprior - 1, mode);
            }
      }

      var cellsafter = cellsprior;
      if (document.getElementById(cell.id).nextSibling) {
            if (cellsafter != 0) {
                  cellafter = document.getElementById(cell.id).nextSibling;
                  changeCell(cellafter, cellsafter - 1, mode);
            }
      }

}
function showSelected(chosencell) {
      document.forms[0].monthone.value = "";
      document.forms[0].monthtwo.value = "";
      document.forms[0].monththree.value = "";
      if (chosencell) {
            document.forms[0].monthtwo.value = chosencell.innerHTML;
      }
      if (document.getElementById(chosencell.id).previousSibling) {
            document.forms[0].monthone.value = document.getElementById(chosencell.id).previousSibling.innerHTML;
      }
      if ( document.getElementById(chosencell.id).nextSibling) {
            document.forms[0].monththree.value = document.getElementById(chosencell.id).nextSibling.innerHTML;
      }
}
</script>

</head>
<body>

<table border="1" cellpadding="5" cellspacing="0" align="center">
      <tr>
            <td id="one" class="plaincell" width="50" onClick="showSelected(this);" onMouseOver="changeCell(this, 1, 'on');" onMouseOut="changeCell(this, 1, 'off');">Jan</td>
            <td id="two" class="plaincell" width="50" onClick="showSelected(this);" onMouseOver="changeCell(this, 1, 'on');" onMouseOut="changeCell(this, 1, 'off');">Feb</td>
            <td id="three" class="plaincell" width="50" onClick="showSelected(this);" onMouseOver="changeCell(this, 1, 'on');" onMouseOut="changeCell(this, 1, 'off');">Mar</td>
            <td id="four" class="plaincell" width="50" onClick="showSelected(this);" onMouseOver="changeCell(this, 1, 'on');" onMouseOut="changeCell(this, 1, 'off');">Apr</td>
            <td id="five" class="plaincell" width="50" onClick="showSelected(this);" onMouseOver="changeCell(this, 1, 'on');" onMouseOut="changeCell(this, 1, 'off');">May</td>
            <td id="six" class="plaincell" width="50" onClick="showSelected(this);" onMouseOver="changeCell(this, 1, 'on');" onMouseOut="changeCell(this, 1, 'off');">June</td>
            <td id="seven" class="plaincell" width="50" onClick="showSelected(this);" onMouseOver="changeCell(this, 1, 'on');" onMouseOut="changeCell(this, 1, 'off');">July</td>
            <td id="eight" class="plaincell" width="50" onClick="showSelected(this);" onMouseOver="changeCell(this, 1, 'on');" onMouseOut="changeCell(this, 1, 'off');">Aug</td>
            <td id="nine" class="plaincell" width="50" onClick="showSelected(this);" onMouseOver="changeCell(this, 1, 'on');" onMouseOut="changeCell(this, 1, 'off');">Sep</td>
            <td id="ten" class="plaincell" width="50" onClick="showSelected(this);" onMouseOver="changeCell(this, 1, 'on');" onMouseOut="changeCell(this, 1, 'off');">Oct</td>
            <td id="eleven" class="plaincell" width="50" onClick="showSelected(this);" onMouseOver="changeCell(this, 1, 'on');" onMouseOut="changeCell(this, 1, 'off');">Nov</td>
            <td id="twelve" class="plaincell" width="50" onClick="showSelected(this);" onMouseOver="changeCell(this, 1, 'on');" onMouseOut="changeCell(this, 1, 'off');">Dec</td>
      </tr>
</table>

<form>
<input type="text" value="" name="monthone" size="30" /><br />
<input type="text" value="" name="monthtwo" size="30" /><br />
<input type="text" value="" name="monththree" size="30" /><br />
</form>

</body>
</html>

ThinkPaper

You may want to consider looking into VML and SVG. I haven't done the "dragging and dropping" method you want but I have done lots of complex calendar websites. Instead of the sliding, the user clicks on the event bar and changes the date and any other data and clicks ok, the page refreshes and the entry is automatically scaled to where it's supposed to be.
With some math you can calculate how far the event bar should go and how long it should be.
It's a pretty daunting task if you've never had experience with it, but once you get it working, it gets a lot easier. Think about using a matrix array to store the positions of where a space is occupied (think of the calendar as a grid). This will solve the problem of events overlapping each other.

mslcorp

ASKER

Thank you, ThinkPaper.
I never have experience with what you said, do you have a example that can show me? if you can give me the code to let me try it, that's best.

Thanks again!

mslcorp

ThinkPaper

i'm hesitant to give the code because this is stuff i'm currently doing for work. (even IF it is just "web code") and i'm not sure of the company rules on that. =(
But I can give you a simple structure of how it would work:

' Query for all your records for this time period
' store your record info in array
' define your matrix array. this will be a 2d array, make large enough (row-wise) since you dont know how many events you got. This will keep track of the plots so you don't put an event over another.
' you can probably make it a dynamic array and resize when it gets too big

'for simplicity you can use a table to set the time periods
<table border="1" style='border-collapse:collapse;' width="100%" id="table1">
      <tr>
            <td>SUN</td>
            <td>MON</td>
            <td>TUE</td>
            <td>WED</td>
            <td>THU</td>
            <td>FRI</td>
            <td>SAT</td>
      </tr>
      <tr>
            <td colspan="7">
            Start VML Group -
this would give you an area to plot out your events.
for simplicity we define 7x10 coordinates for the 7
days and 10 rows
so if x=1 then event is on Sunday, x=2 Monday, etc.
              While going thru your recordsarray
              calculate x
              then go thru matrix array and see if there is open slot
              if slot is open then space is available for plotting
              your y is now calculated
              fill up matrix where space is taken
              end loop
              draw rectangle using vml and coords you calculated.

              End Loop
            Close VML Group
            </td>
      </tr>
</table>

Drawing rectangles:
<v:rect id='2' title="Doctors Appt" style='position:absolute;left:0; width:4px; height:5; top:6' stroked='t' fillcolor='blue'>

You'll need to do calculations to determine the width and positions (top and left).

SVG is supposed to better than VML especially since it's not from Microsoft. But the big issue right now with SVG is that it requires browsers to download a component to view it, while VML does not.
But there's issues with VML too. Unfortunately, there aren't many VML tutorials out there. The best one (and ONLY one) so far is from the Microsoft webpage.
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/vml/default.asp

*Another note ~ a friend of mine did try doing the drag and drop technique you wanted (think of it like Powerpoint) using SVG.. but it didn't work out too well for him. It just became too huge a task to even bother doing.

Hope this helps. Good luck

mslcorp

ASKER

ThinkPaper, thank you very much, I am very appreciate your help.

VML is new thing for me, but I am very interesting in it, I wll study it based on your suggestion.

Thanks again!

mslcorp

peterxlane

Thanks ThinkPaper, that was informative.

Here is a free VML editor: http://www.dynamicdrive.com/dynamicindex11/editor.htm

Another way to generate VML is to create a word doc and insert a chart, word art, etc in it and then save it as an html file. Most of the images, etc on the page are converted to VML.

I believe you can only view VML with IE...

mslcorp

ASKER

Hi, peterxlane,

The editor is very useful, thanks!

mslcorp

mslcorp

ASKER

ThinkPaper,

I read some information about VML, It's very cool, but I still don't get it in which situation, it's good to use it.

I have a silly question, why you use it for the schedule?

mslcorp

ThinkPaper

I use VML for scheduling because it allows you to create images on the fly and to plot them out mathematically. You have a wide range of things you can do with it. The shapes, colors, size, location, can all be automatically determined depending on your data.
If you try to do this simply using tables (merging cols/rows) or even images then it becomes very complicated and messy. VML is great to use when you're doing any kind of plotting, from piecharts to graphs.. etc..
And yes, major downside is that VML only works in IE... =/

peterxlane

This has been on of the only aspects of .Net I have embraced... the ability to create images on the fly. Using this method, the image is created on the server and streamed to the user, so there are no special components required at all and it will work in any browser.

I must say though, I am really impressed with the quality of stuff that is produced using SVG, and I wasn't even aware I had an SVG viewer installed.... Here are the samples I was looking at:

http://www.alerme.com/Default.aspx?load=SVG&svgName=charts&svgHeight=350&svgWidth=450

mslcorp

ASKER

Now I have more understanding about VMS.
But what did "plot them out mathematically" mean ?? I don't undersand this, would you please give several lines of codes to show it?

Thanks!

ThinkPaper

I just meant you can draw the shapes automatically using code. So you can automate graphs and pie charts, kind of like what you do in Excel. You change a value in the table, then your chart changes too.

static vml code:

<v:rect id='2' title="Doctors Appt" style='position:absolute;left:0; width:4px; height:5; top:6' stroked='t' fillcolor='blue'>

You shouldn't be hard coding it but replacing it with variables and have it automatically calculated in your code:

response.write "<v:rect id='"&eventID&"' title='"&eventTitle&"' style='position:absolute;left:"&x&"; width:"&length&"px; height:5; top:"&y&"' stroked='t' fillcolor='"&statusColor&"'>"

ThinkPaper

Try looking at this.
A different approach to calendaring:

http://www.dhtmlgoodies.com/scripts/dhtmlgoodies-week-planner/dhtmlgoodies-week-planner.html

mslcorp

ASKER

Hi, ThinkPaper,

Does it possible to give me the source codes for weekly planner, I like it, it's very cool.

Thanks!

ASKER CERTIFIED SOLUTION

ThinkPaper

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial