Jump to content
Sign in to follow this  
IElite

Calendar Control

Recommended Posts

I would like to see a calendar control (TW3Calendar) in the RTL. :) Possibly derive it from TW3Grid? It would be nice to make it like the Delphi version, but I dont think it has to be as elaborate. I think you could keep the Month, Year, and Navigation controls off from the calendar and just make the Month and Year properties and the navigation routines.

I would like to see at least the Month view (BONUS:  year, and day view as well)

I have looked at a lot of javascript versions and most are too bloated for me to attempt to port over.

Features I would like to see:

  • - should show the one or more days of previous month if current months first day starts on anything other than the first day of the week
  • - should show the one or more days of next month if current months last day falls on anything other than the last day of the week
  • - should be able to navigate through the years, months
  • - should be able to highlight the current day
  • - clickable days

BONUS:  able to set and highlight a range of days. Click and Drag :)

Share this post


Link to post
Share on other sites

I suppose it'd be best for us to use an existing js calendar control. We're already doing that with Google maps and the next update will have Openmaps (through the Leaflet library). Any suggestions on which one to wrap?

Share this post


Link to post
Share on other sites

a quicky calendar :

function jQuery(aTagObj: TW3TagObj): Variant;
function jQueryExternal(v: Variant): Variant; external '$';

implementation

{ TForm1 }

function jQuery(aTagObj: TW3TagObj): Variant;
begin
  result := jQueryExternal(aTagObj.handle);
end;

procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components

  MyBox := TW3EditBox.Create(self);
  MyBox.Text := 'Date';
  MyBox.SetBounds(20,20,200,40);

  var props : Variant := TVariant.Create;
  props['dateFormat'] := 'dd/mm/yy';
  jQuery( MyBox ).datepicker(props);

// or alternatively
//  jQuery( MyBox ).datepicker();
//  jQuery( MyBox ).datepicker("option", "dateFormat", "dd/mm/yy");
end;

and add this to your custom template

  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

there are many options for this widget 

demo here   

(based on older post)

 

Share this post


Link to post
Share on other sites

I suppose marrying third-party controls means living with it (up to a point)

In this case jQuery offers themeRoller, which generates a theme. The resulting css spec can then be included

Otherwise individual control classes can be overridden.

JQuery style :

  jQueryExternal(browserapi.Document.getElementById("ui-datepicker-div")).addClass( "my-ui-widget-header" );

or RTL style

  TW3TagStyle.AddClassToControl(browserapi.Document.getElementById("ui-datepicker-div"), "my-ui-widget-header");
or
  browserapi.Document.getElementById("ui-datepicker-div").setAttribute("style", "background:red; border: 1px solid blue;");

 

(btw : link to older post :))

 

Share this post


Link to post
Share on other sites

@lynkfs

When I add your code,  I get error

 

  function jQuery(aTagObj: TW3TagObj): Variant;
  function jQueryExternal(v: Variant): Variant; external '$';   ***** Syntax Error: Unexpected Statement

implementation

function jQuery(aTagObj: TW3TagObj): Variant;
begin
  result := jQueryExternal(aTagObj.handle);
end;

 

 

 

Share this post


Link to post
Share on other sites

custom template :

  • right-click somewhere in the Project Manager pane and select 'add template',
  • go to your SMS 'Templates' directory and select 'default.html'
  • this will add a 'custom template' unit in the Project Manager pane
  • then add the 3 jquery lines to that unit :
<!DOCTYPE html>
<html<?pas if Project.Options.Linker.GenerateAppCacheManifest then Print(' manifest="app.manifest"');?>>
<head>    
  <?pas=Project.MetaData.AsTags?>
  <?pas=Compiler.ManifestTag?>
  <?pas=Compiler.IconLinkTags?>
  <?pas=Project.WebFonts?>

    <title><?pas=Project.Title?></title>

  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <?pas
    PrintLn(Compiler.ThemeTag);  
    for var s in Compiler.Resources("text/css") do
        PrintLn('<link rel="stylesheet" href="'+s+'">');
    for var s in Compiler.Resources("text/javascript") do  
        PrintLn('<script src="'+s+'" type="text/javascript"></script>');

  // NOTE: This template is not completed and thus more or less identical to 
  // the simple.html template. Future versions will feature more advanced 
  // scripts to fine control the generation of tags.
  // 
  // While this version should work reliably, you do not have control over
  // the bootloader mechanism in this file. Please create a custom template
  // for this case and replace the code below with a custom bootloader 
    ?>

  <?pas=Compiler.InlineScriptTag?>
</head>

<body><?pas=Compiler.LinkedScriptTag?></body>

</html>

 

form1 unit :

unit Form1;

interface

uses 
  System.Types,
  System.Types.Convert,
  System.Objects,
  System.Time,
  SmartCL.System,
  SmartCL.Time,
  SmartCL.Graphics,
  SmartCL.Components,
  SmartCL.FileUtils,
  SmartCL.Forms,
  SmartCL.Fonts,
  SmartCL.Theme,
  SmartCL.Borders,
  SmartCL.Application, SmartCL.Controls.EditBox;  //, SmartCL.CSS.Classes;

type
  TForm1 = class(TW3Form)
  private
    {$I 'Form1:intf'}
  protected
    procedure InitializeForm; override;
    procedure InitializeObject; override;
    procedure Resize; override;
    MyBox    : TW3EditBox;
  end;

function jQuery(aTagObj: TW3TagObj): Variant;
function jQueryExternal(v: Variant): Variant; external '$';

implementation

{ TForm1 }

function jQuery(aTagObj: TW3TagObj): Variant;
begin
  result := jQueryExternal(aTagObj.handle);
end;

procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components

  MyBox := TW3EditBox.Create(self);
  MyBox.Text := 'Date';
  MyBox.SetBounds(20,20,200,40);

  var props : Variant := TVariant.Create;
  props['dateFormat'] := 'dd/mm/yy';
  jQuery( MyBox ).datepicker(props);

end;

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
end;
 
procedure TForm1.Resize;
begin
  inherited;
end;
 
initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.


 

Share this post


Link to post
Share on other sites

sometimes (always ?) when copying / pasting code from a forum post into the ide, some invisible and unwanted characters are transferred as well. The compiler doesn't like that and gives weird error messages.

The only way to rectify is to delete and retype offending lines.

That is probably what happened when you got "***** Syntax Error: Unexpected Statement" 

Share this post


Link to post
Share on other sites
6 hours ago, lynkfs said:

sometimes (always ?) when copying / pasting code from a forum post into the ide, some invisible and unwanted characters are transferred as well. The compiler doesn't like that and gives weird error messages.

The only way to rectify is to delete and retype offending lines.

That is probably what happened when you got "***** Syntax Error: Unexpected Statement" 

It is exactly what happened!

Share this post


Link to post
Share on other sites

I have a job I need to do requiring a calendar and while the example above seems to work I am rather like the dhtmlxCalendar  calendar component

https://docs.dhtmlx.com/calendar__index.html

 

Here is a mockup of what I am after

https://numberworksnwords.com/makeup/

 

My skills are not really up to it when it comes to integrating js into sms :(

Not sure how to proceed without some help. 

 

 

Share this post


Link to post
Share on other sites

Easiest way :

procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components

  var CalenderBox : TW3Panel := TW3Panel.Create(self);
  CalenderBox.SetBounds(10,10,252,266);
  CalenderBox.handle.id := 'CalenderBox';

  var myCalendar : variant := new JObject;
asm
  @myCalendar = new dhtmlXCalendarObject("CalenderBox");
end;

  myCalendar.disableDays("week", [7]);
  myCalendar.setDateFormat("%Y-%m-%d");
  myCalendar.setHolidays("2019-03-19");

  var yesterday : float := Now()-1;
  myCalendar.setInsensitiveRange(null, DateToStr(yesterday));

  myCalendar.attachEvent("onClick", procedure(date:variant)
  begin
    writeln(myCalendar.getFormatedDate('%d-%m-%Y'));
  end);
  myCalendar.show();

end;

make sure you include the necessary dhtmlx files in your index.html (Project Manager pane, right-click, add Template and select default.html from the Templates directory. This creates a new unit Custom Template. Then add the 2 lines below) . I used the cdn version (which contains the whole suite)

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css" type="text/css">
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js" type="text/javascript"></script>

(alternatively you can import these files in code too)


Capture.png

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×