eBase native calendar control

[Segi]

I am developing a business project in eBase that is going to be an eBase native calendar control. I realize that you can do this via jQuery although I'm not too impressed by most of the solutions that I've come across.

I've just started developing it this week so I do not have a lot of functionality to demonstrate at this point.

At the moment, it generates a calendar for the specified month and year. Everything that you see in the screenshot below is functional.

It will soon support loading of calendar events from a database with color coded categories, reoccurring events, all day events, an administrative form to manage events and probably more.

Any feedback or suggestions are welcome.

Here is a screenshot of what I have done so far.

http://i.imgur.com/83JtpsH.png

[Dave]

Looks nice Segi...can we have it once you've got it all working!

[Segi]

Sure no problem.

Once its done, I can email you the transport file

[Segi]

Is there a way to hide a specified row of a grid control ?

I want to hide the last row of the grid control in some circumstances and tried this:

Code: Select all

controls.GRIDCELL_6_1.all.setHidden(true);
controls.GRIDCELL_6_2.all.setHidden(true);
controls.GRIDCELL_6_3.all.setHidden(true);
controls.GRIDCELL_6_4.all.setHidden(true);
controls.GRIDCELL_6_5.all.setHidden(true);

In theory, this should hide the 5 cells that make up the bottom row of my grid control but it does not hide them.

[Segi]

I created a solution that works on the client side using jQuery.

The calendar is made up of a grid control with 5 columns (Monday-Friday) and 6 rows (I added a 6th row in case I decided to add weekends to the calendar later).

If the current calendar month only has 5 full work weeks, hide the 6th row which is going to be blank. If the month only has 4 full work weeks (like February 2014 for example) hide the 5th row which is going to be blank.

I accomplished this on the client side by creating ids for all controls that will change the month or year then created this client script:

MONTHGRID is the id for my grid control.
CALENDAR_PANEL is the id for the panel that contains the MONTHGRID as well as the month/year selection buttons and dropdowns.

Each grid cell contains 11 text controls. The first contains the day of the month. The next 10 are going to be for each event for that day of the month.

Code: Select all

$(document).ready(function () {
	   var fullHeight="950px"; // Panel height of full calendar

     var fourWeekHeight="690px"; // Panel height for 4 weeks

	   var fiveWeekHeight="820px"; // Panel height for 5 weeks 
	   
	   // Check the weeks to see if the last or 2nd to last row is empty. If so, hide it
	   function checkWeeks() {
	   	    // Check the first text field in the first cell of the 5th row to see if it contains any text
	   	    if ( $.trim($('.MONTHGRID tbody tr').parent().eq(0).children().eq(5).children().children().eq(0).children().eq(1).children().eq(0).children().text()) == "" ) {
               $('.MONTHGRID tbody tr').parent().eq(0).children().eq(5).css('display','none');

               // Adjust height for four week height
               $('#CALENDAR_PANEL').css('height',fourWeekHeight);
          } else {
          	   // Display this row
          	   $('.MONTHGRID tbody tr').parent().eq(0).children().eq(5).css('display','table-row');

               // Restore the panel height to the full size
          	   $('#CALENDAR_PANEL').css('height',fullHeight);
          }

          // Check the first text field in the first cell of the 6th row to see if it contains any text
	        if ( $.trim($('.MONTHGRID tbody tr').parent().eq(0).children().eq(6).children().children().eq(0).children().eq(1).children().eq(0).children().text()) == "" ) {
               $('.MONTHGRID tbody tr').parent().eq(0).children().eq(6).css('display','none');

               // Only change the height when it wasn't adjusted above
               if  ($('#CALENDAR_PANEL').css('height') != fourWeekHeight ) {
                    $('#CALENDAR_PANEL').css('height',fiveWeekHeight);
               }               
          } else {
          	   $('.MONTHGRID tbody tr').parent().eq(0).children().eq(6).css('display','table-row');

               // Only change the height when it wasn't adjusted above
          	   if  ($('#CALENDAR_PANEL').css('height') == fiveWeekHeight ) {
          	        $('#CALENDAR_PANEL').css('height',fullHeight);
          	   }
          }
	   }
	   
     $("body").on("click", '#PreviousMonth,#MonthSelect,#YearSelect,#NextMonth',function(event){
          setTimeout(function(){
               checkWeeks();
          }, 500);
     });

     $(window).on("load", function() {
          setTimeout(function(){
               checkWeeks();
          }, 500);
     });
});

[HarryDeBoer]

Hi Segi,

you could hide a row by using the solution Dave gave in another topic. Every gridcell in the row you give a modifier name and then in code (example for hiding the gridcells with a modifier 'firstrow'):

for each (var ctrl in pages.PAGE_1.getControlsByModifier("firstrow")){ctrl.all.setHidden(true);}

[Dave]

Just a design thought Segi. Did you consider using a Repeater with a Column layout type for the calendar grid? We've used this approach before on a generic booking application and being able to format/prepare everything on the server side (after loading in the data for week/month from a db) has some processing advantages (in terms of simplicity).

Anyway, just a thought as I say. If you're interested then let me know and we'll zip up an example system and send it over.

Dave

[Segi]

Dave,

I did not use a repeater for the calendar as I decided to use a different approach.

I have a grid that is 5 columns x 7 rows that covers a full calendar month.

The first row displays Mon-Fri.

On the remaining rows, each grid cell contains a sub grid which is a 1x11 grid (1 column and 11 rows). The first row of the sub grid contains the day of the month and the following 10 rows are for events for that date.

The calendar generation and population of events are still done on the server side.

[Segi]

I appreciate the offer but using a different layout would require me to rewrite my code since my code expects the grid and sub grid to be laid out in a certain format that I just described

[Dave]

Sure. I guess the Repeater approach would be to have the sub-grid represented by a Nested Repeater. The Event part of the sub-grid I mean, rather than the cell that holds the name of the day.