Jump to content

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 :)

Link to post
Share on other sites
  • Moderators

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)

 

Link to post
Share on other sites
  • Moderators

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 :))

 

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;

 

 

 

Link to post
Share on other sites
  • Moderators

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.


 

Link to post
Share on other sites
  • Moderators

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" 

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!

Link to post
Share on other sites
  • 4 months later...

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. 

 

 

Link to post
Share on other sites
  • Moderators

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

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...