NetWebYear or other scheduler

[GordonF]

Hi,

I've tried using NetWebYear to create a basic appointment book and in truth it provides all I must have apart from a couple of features:

1. The ability to change the background colour of specific time slots for a given date to make non working times such as lunch obvious, I know I could put an appointment in but it's no ideal.

2. Ideally select a colour for individual events.

Are either of these possible.

Failing that I've looked at FullCalendar but that will be a steep learning curve for me as I've not used a jquery plugin before and I don't know if its even possible.

I know I ask a lot of questions but I do appreciate the help I receive.

Gordon

[Bruce]

Hi Gordon,

You can put data from multiple sources on the planner, so I'd create a small table for "blocked out time".
This would then be flexible. These "blocks" can use a CSS style to set background, text whatever. Interestingly this appraoch would still allow for appointments in blocked-out time (which might be handy in some setups.)

Coloring individual data is straight-forward enough, again using either CSS or properties in the table. An example of what is possible is visible here - https://www.cidc2019.com/scheduleDay - this is done with the planner control.

A Webinar will likely be the best place to demonstrate the setup to this procedure - if you can't make Thursday, then pop in to the Wednesday one and we can do it there. (Or remind me sometime on Thursday and I'll do a run-through so you can see it later.)

Cheers
Bruce

[GordonF]

Thank you Bruce that is really kind of you, I will try to attend Wednesday, in the meantime I'll play around with the ideas you suggest.

Gordon

[GordonF]

Hi Bruce,

Just a couple of quick questions if I may, I've successfully loaded data from 2 tables, blocked out time and actual appointments and I can colour them as required. However I do have 2 issues:

1. The would be background blocked out entries sit over part of an appointment entry if is starts later than but not before the end of an actual appointment, the later starting appointment sits on top which is obviously desirable normally but not if it's intended to be a background only. I've attached an image.

2. I can't make insert work when clicking on a blocked out entry, I get a record not found error in the insert/update form as it is can't find an appointment because there isn't one, but it's trying to update because I clicked on an entry in PlannerQueue.Data albeit from the blocked out table.

Is there any way of making the blocked out entries truly inactive so they are display only and allow inserts into the main appointment table if I click on a time in a blocked out region?

I'm so close to this being perfect for my needs.

Gordon

[Bruce]

Hi Gordon,

1. I'm not 100% sure what your actual question is here, but you can play with CSS things like transparency, and z-order, to make things overlap, or one appear behind the other. I have also used padding to make some blocks "smaller" which in turn can denote "background" information.

2. I would need to see an example of what you have set up etc in order to comment.
Have you set up a form for both data sets, or only a form for one of the data sets?

Cheers
Bruce

[GordonF]

Hi Bruce,

I don't think I gave a clear explanation of what I'm trying to achieve. All I actually want to do is colour individual cells so at a glance the user can see available time for a given clinician on a specific date and also identify any areas reserved for specific treatment types or some other purpose.

I've attached an image showing our desktop appointment book, the grey areas represent the out of hours and lunch times, the orange area in the third column indicates a treatment specific template is active on this date and time for this clinician. There is only one appoint and that is in column one for a Mr Alan Adams.

I'm trying to get a similar representation in our web app, the coloured cells are simply coloured they have no content or active code, they are purely a visual indicator. The pattern of these coloured cells varies by date and clinician. The form used to insert/change an appointment notifies the user of any usage restrictions.

On inspection of the page code in the browser it at first seemed that I could somehow add "background-color" to the row style, however even if I could it colours the whole row not just a cell. I did try using a second data table to colour regions but this inserts normal events into the planner and I was unable to essentially make them transparent to clicks, as a result it couldn't call the actual appointment insert form if I clicked on one of these areas, they also sit over real appointments if the times overlap.

Perhaps I'm asking too much of it or more likely I lack the knowledge to make it work, but a pointer in the right direction would be fantastic.

Am I correct in thinking I could inject html similar to the following into the correct part of the page row generation, it's only simplified appointment html with no form and different class details, it seems to work if I edit the html on a browser page:

<div data-nt-start-date="80638" data-nt-start-time="3180001" data-nt-end-date="80638" data-nt-end-time="3360002" data-nt-column="1" data-nt-margin="0"
  class="planner-row-size nt-relative" style="color: rgb(0, 0, 0); background-color: rgb(128, 128, 0); left: 5px; width: 343px; top: 0px; height: 144.001px; padding-left: 0px; padding-right: 0px;">
<div class="planner-data-text">Morning Break</div>
</div>

Gordon

[Bruce]

Hi Gordon,

with visual questions like these the webinars are the best way to work through them because then we can have a conversation and quickly get to what you need. Trying to describe this sort of thing through writing is complicated.

Cheers
Bruce

[GordonF]

Hi Bruce,

Is the webinar Thursday this week, I'll try to attend.

Gordon

[Bruce]

yes, the NetTalk webinar is on Thursday, but if you can't make that we do an OpenClarion webinar on Wednesday.

Cheers
Bruce

[GordonF]

Hi Bruce,

I've produced a solution that will suffice for the time being as it works well, I've attached a partial screen shot.

I have made a few changes to DrawPlanRow in NetWeb.clw which I realise has potential issues in future updates of WebServer. The only limitation I currently have is being limited to one day because of the 'nt-relative' attribute in the class, this causes a background element on day 2 to be placed after the similar timed element in  day 1, although in the correct column. I think I can solve this if required by taking a look more closely at the 'nt-relative' and 'planner-data' definitions as a none responsive version of 'planner-data' would be ideal, but that is for another day.

Thank you for your help.

NetWebServerWorkerBase.DrawPlanRow   Procedure(String p_ParentId,NetPlannerDataQueueType p_Queue)
Packet      StringTheory
y           Long
  code
    packet.SetValue('data-nt-row="data" data-nt-parent="' & clip(p_ParentId) & '"')
    self.DivHeader(p_ParentId,'planner-row-size nt-relative',Net:Send+Net:Crc,,packet.GetValue())

    loop y = 1 to records(p_Queue)
      Get(p_Queue,y)

      If Lower(clip(p_Queue.Css)) = 'background'
        packet.SetValue('<div ')
        If p_Queue.StartDate or p_Queue.StartTime
          packet.append(self.wrap('data-nt-start-date',p_Queue.StartDate))
          packet.append(self.wrap('data-nt-start-time',p_Queue.StartTime))
        end
        If p_Queue.EndDate or p_Queue.EndTime
          if p_Queue.EndTime > 8640000
            p_Queue.EndDate += (p_Queue.EndTime/8640000)
            p_Queue.EndTime = p_Queue.EndTime % 8640000
          end
          packet.append(self.wrap('data-nt-end-date',p_Queue.EndDate))
          packet.append(self.wrap('data-nt-end-time',p_Queue.EndTime))
        end
        packet.append(self.wrap('data-nt-column',p_Queue.column))
        packet.append(self.wrap('data-nt-id',p_Queue.Hash))
        packet.append(self.wrap('data-nt-margin',p_Queue.Margin))
        packet.append(self.CreateTip(p_Queue.Tip,p_Queue.TipHtml))
        packet.append(' class="planner-data-width planner-data-height nt-relative"')
        packet.append(' data-nt-row="data"')
        packet.append(' data-nt-parent="' & p_ParentId & '"')
        packet.append(self.wrap('style',p_Queue.Style))
        packet.append('></div>' & self.CRLF)
        do SendPacket
      Else
        packet.SetValue('<div ')
        If p_Queue.StartDate or p_Queue.StartTime
          packet.append(self.wrap('data-nt-start-date',p_Queue.StartDate))
          packet.append(self.wrap('data-nt-start-time',p_Queue.StartTime))
        end
        If p_Queue.EndDate or p_Queue.EndTime
          if p_Queue.EndTime > 8640000
            p_Queue.EndDate += (p_Queue.EndTime/8640000)
            p_Queue.EndTime = p_Queue.EndTime % 8640000
          end
          packet.append(self.wrap('data-nt-end-date',p_Queue.EndDate))
          packet.append(self.wrap('data-nt-end-time',p_Queue.EndTime))
        end
        packet.append(self.wrap('data-nt-column',p_Queue.column))
        packet.append(self.wrap('data-nt-id',p_Queue.Hash))
        packet.append(self.wrap('data-nt-form',p_Queue.Form))
        packet.append(self.wrap('data-nt-margin',p_Queue.Margin))
        packet.append(self.CreateTip(p_Queue.Tip,p_Queue.TipHtml))
        If p_Queue.Css
          packet.append(' class="nt-hard-left planner-data-width planner-data-height planner-data ui-corner-all '&clip(p_Queue.Css)&'"')
        Else
          packet.append(' class="nt-hard-left planner-data-width planner-data-height planner-data ui-corner-all"')
        End
        packet.append(self.wrap('style',p_Queue.Style))
        packet.append('><div class="planner-data-text">' & self._jsok(p_Queue.Content,p_queue.ContentHtml) & '</div></div>' & self.CRLF)
        do SendPacket
      End
    end
    self.DivFooter()

SendPacket  routine
  self.ParseHTML(packet,1,0,NET:NoHeader)
  packet.setvalue('')

[Bruce]

Hi Gordon,

email me your modified netweb.clw and I'll take a look at the changes you made.

Cheers
Bruce

[GordonF]

Hi Bruce, I've emailed my NetWeb.clw, thank you for looking into this.