[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Create a schedule bar in asp

Posted on 2006-05-02
19
Medium Priority
?
389 Views
Last Modified: 2008-02-01
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!!!!
0
Comment
Question by:mslcorp
  • 7
  • 6
  • 4
17 Comments
 
LVL 12

Expert Comment

by:peterxlane
ID: 16587832
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?
0
 

Author Comment

by:mslcorp
ID: 16588139
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
0
 
LVL 12

Expert Comment

by:peterxlane
ID: 16589590
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>
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 16

Expert Comment

by:ThinkPaper
ID: 16590104
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.
0
 

Author Comment

by:mslcorp
ID: 16596008
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
0
 
LVL 16

Expert Comment

by:ThinkPaper
ID: 16607166
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
0
 

Author Comment

by:mslcorp
ID: 16607457
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
0
 
LVL 12

Expert Comment

by:peterxlane
ID: 16607686
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...

0
 

Author Comment

by:mslcorp
ID: 16609567
Hi, peterxlane,

The editor is very useful, thanks!

mslcorp
0
 

Author Comment

by:mslcorp
ID: 16614184
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
0
 
LVL 16

Expert Comment

by:ThinkPaper
ID: 16615784
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... =/
0
 
LVL 12

Expert Comment

by:peterxlane
ID: 16615926
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

0
 

Author Comment

by:mslcorp
ID: 16617799
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!
0
 
LVL 16

Expert Comment

by:ThinkPaper
ID: 16632308
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&"'>"
0
 
LVL 16

Expert Comment

by:ThinkPaper
ID: 16641019
0
 

Author Comment

by:mslcorp
ID: 16913206
Hi, ThinkPaper,

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

Thanks!
0
 
LVL 16

Accepted Solution

by:
ThinkPaper earned 2000 total points
ID: 17001451
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

I recently decide that I needed a way to make my pages scream on the net.   While searching around how I can accomplish this I stumbled across a great article that stated "minimize the server requests." I got to thinking, hey, I use more than one…
Hello, all! I just recently started using Microsoft's IIS 7.5 within Windows 7, as I just downloaded and installed the 90 day trial of Windows 7. (Got to love Microsoft for allowing 90 days) The main reason for downloading and testing Windows 7 is t…
Are you ready to place your question in front of subject-matter experts for more timely responses? With the release of Priority Question, Premium Members, Team Accounts and Qualified Experts can now identify the emergent level of their issue, signal…
Screencast - Getting to Know the Pipeline
Suggested Courses

829 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