Home Explore Help
Sign In
pascal
/
pas2js
mirror of https://gitlab.com/freepascal.org/fpc/pas2js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

* Split in FullCalendar V4 and V5 demos

michael 5 years ago
parent
37b9ddb411
commit
143a836c5f
7 changed files with 504 additions and 2 deletions
Split View Show Diff Stats
  1. 2 2
      demo/fullcalendar/demofullcalendar4.html
  2. 91 0
      demo/fullcalendar/demofullcalendar4.lpi
  3. 117 0
      demo/fullcalendar/demofullcalendar4.lpr
  4. 59 0
      demo/fullcalendar/demofullcalendar5.html
  5. 91 0
      demo/fullcalendar/demofullcalendar5.lpi
  6. 136 0
      demo/fullcalendar/demofullcalendar5.lpr
  7. 8 0
      demo/fullcalendar/index.html

+ 2 - 2
demo/fullcalendar/demofullcalendar.html → demo/fullcalendar/demofullcalendar4.html
View File 

@@ -39,7 +39,7 @@
 
 
   </style>
 
   <title>FullCalendar.JS demo in Pas2JS</title>
 
-  <script src="demofullcalendar.js"></script>
 
+  <script src="demofullcalendar4.js"></script>
 
 </head>
 
 <body>
 
   <div class="container-fluid">
 
@@ -56,7 +56,7 @@
 
    <div class="source row">
 
      <div>
 
        Created using &nbsp; <a target="_blank" href="https://wiki.freepascal.org/pas2js">pas2js.</a> &nbsp;&nbsp;Sources: &nbsp; 
-       <a target="new" href="demofullcalendar.lpr">Program</a>.
 
+       <a target="new" href="demofullcalendar4.lpr">Program</a>.
 
      </div>
 
     </div>
 
   </div>

+ 91 - 0
demo/fullcalendar/demofullcalendar4.lpi
View File 

@@ -0,0 +1,91 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<CONFIG>
 
+  <ProjectOptions>
 
+    <Version Value="12"/>
 
+    <General>
 
+      <Flags>
 
+        <MainUnitHasCreateFormStatements Value="False"/>
 
+        <MainUnitHasTitleStatement Value="False"/>
 
+        <MainUnitHasScaledStatement Value="False"/>
 
+        <Runnable Value="False"/>
 
+      </Flags>
 
+      <SessionStorage Value="InProjectDir"/>
 
+      <Title Value="demofullcalendar4"/>
 
+      <UseAppBundle Value="False"/>
 
+      <ResourceType Value="res"/>
 
+    </General>
 
+    <CustomData Count="5">
 
+      <Item0 Name="MaintainHTML" Value="1"/>
 
+      <Item1 Name="PasJSHTMLFile" Value="project1.html"/>
 
+      <Item2 Name="PasJSPort" Value="0"/>
 
+      <Item3 Name="PasJSWebBrowserProject" Value="1"/>
 
+      <Item4 Name="RunAtReady" Value="1"/>
 
+    </CustomData>
 
+    <BuildModes>
 
+      <Item Name="Default" Default="True"/>
 
+    </BuildModes>
 
+    <PublishOptions>
 
+      <Version Value="2"/>
 
+      <UseFileFilters Value="True"/>
 
+    </PublishOptions>
 
+    <RunParams>
 
+      <FormatVersion Value="2"/>
 
+    </RunParams>
 
+    <Units>
 
+      <Unit>
 
+        <Filename Value="demofullcalendar4.lpr"/>
 
+        <IsPartOfProject Value="True"/>
 
+      </Unit>
 
+      <Unit>
 
+        <Filename Value="demofullcalendar4.html"/>
 
+        <IsPartOfProject Value="True"/>
 
+        <CustomData Count="1">
 
+          <Item0 Name="PasJSIsProjectHTMLFile" Value="1"/>
 
+        </CustomData>
 
+      </Unit>
 
+    </Units>
 
+  </ProjectOptions>
 
+  <CompilerOptions>
 
+    <Version Value="11"/>
 
+    <Target FileExt=".js">
 
+      <Filename Value="demofullcalendar4"/>
 
+    </Target>
 
+    <SearchPaths>
 
+      <IncludeFiles Value="$(ProjOutDir)"/>
 
+      <UnitOutputDirectory Value="js"/>
 
+    </SearchPaths>
 
+    <Parsing>
 
+      <SyntaxOptions>
 
+        <AllowLabel Value="False"/>
 
+        <CPPInline Value="False"/>
 
+        <UseAnsiStrings Value="False"/>
 
+      </SyntaxOptions>
 
+    </Parsing>
 
+    <CodeGeneration>
 
+      <TargetOS Value="browser"/>
 
+    </CodeGeneration>
 
+    <Linking>
 
+      <Debugging>
 
+        <GenerateDebugInfo Value="False"/>
 
+        <UseLineInfoUnit Value="False"/>
 
+      </Debugging>
 
+    </Linking>
 
+    <Other>
 
+      <CustomOptions Value="-Jeutf-8 -Jirtl.js -Jc -Jminclude"/>
 
+      <CompilerPath Value="$(pas2js)"/>
 
+    </Other>
 
+  </CompilerOptions>
 
+  <Debugging>
 
+    <Exceptions>
 
+      <Item>
 
+        <Name Value="EAbort"/>
 
+      </Item>
 
+      <Item>
 
+        <Name Value="ECodetoolError"/>
 
+      </Item>
 
+      <Item>
 
+        <Name Value="EFOpenError"/>
 
+      </Item>
 
+    </Exceptions>
 
+  </Debugging>
 
+</CONFIG>

+ 117 - 0
demo/fullcalendar/demofullcalendar4.lpr
View File 

@@ -0,0 +1,117 @@
 
+program demofullcalendar4;
 
+
 
+{$mode objfpc}
 
+
 
+uses
 
+  dateutils, browserapp, types, JS, Classes, SysUtils, Web, libfullcalendar4;
 
+
 
+type
 
+
 
+  { TMyApplication }
 
+
 
+  TMyApplication = class(TBrowserApplication)
 
+    FCalendarEl : TJSHTMLElement;
 
+    FCalendar : TFullCalendar;
 
+    procedure doRun; override;
 
+  private
 
+    function CreateEvents: TBaseCalendarEventArray;
 
+    procedure ShowLocales;
 
+  end;
 
+
 
+Function TMyApplication.CreateEvents : TBaseCalendarEventArray;
 
+
 
+Const
 
+  BuySell : Array[1..3] of string = ('Buy','Sell','Borrow');
 
+  Articles : Array[1..10] of String = ('books','sugar','coffee','apples','bananas','smartphone','bread','meat','cabbage','tomatoes');
 
+  Colors : Array[1..10] of string = ('silver','gray','salmon','plum','mediumpurple','slateblue','lime','seagreen','darkgreen','teal');
 
+
 
+Var
 
+  Ev,AllDay : Boolean;
 
+  D1,D2 : TDateTime;
 
+  E : TBaseCalendarEvent;
 
+  I : Integer;
 
+
 
+begin
 
+  SetLength(Result,62);
 
+  For I:=1 to 62 do
 
+    begin
 
+    D1:=Date-31+i;
 
+    if DayOfTheWeek(D1)=7 then
 
+     D1:=D1+1;
 
+    Ev:=(DayOfTheWeek(D1) mod 2=0);
 
+    allDay:=(I mod 5)=0;
 
+    if allDay then
 
+      D2:=D1
 
+    else
 
+      begin
 
+      D1:=IncHour(D1,9+Random(12));
 
+      D1:=IncMinute(D1,Random(12)*5);
 
+      D2:=IncMinute(D1,10*Random(20));
 
+      end;
 
+    E:=TBaseCalendarEvent.event(BuySell[1+Random(3)]+' '+Articles[1+Random(10)],D1,D2);
 
+    E.color:=Colors[1+Random(10)];
 
+    E.allDay:=allDay;
 
+    Result[I-1]:=E;
 
+    end;
 
+end;
 
+
 
+procedure TMyApplication.ShowLocales;
 
+
 
+Var
 
+  Locales : TStringDynArray;
 
+  CB,O : TJSHTMLElement;
 
+  S : String;
 
+
 
+begin
 
+  CB:=GetHTMLElement('locale-selector');
 
+  Locales:=FCalendar.getAvailableLocaleCodes();
 
+  for S in Locales do
 
+    begin
 
+    O:=createHTMLElement('option');
 
+    O['value'] := S;
 
+    O.innerText :=S;
 
+    CB.appendChild(O);
 
+    end;
 
+  CB.addEventListener('change',TJSRawEventHandler (Procedure (Event: TJSEvent)
 
+    var v : String;
 
+    begin
 
+     V:=String(event.Target['value']);
 
+     if (V<>'') then
 
+       Fcalendar.setOption('locale',V);
 
+    end
 
+  ));
 
+end;
 
+
 
+
 
+procedure TMyApplication.doRun;
 
+
 
+Var
 
+  O : TFullCalendarOptions;
 
+
 
+begin
 
+  // Your code here
 
+  Terminate;
 
+  FCalendarEl:=GetHTMLElement('thecalendar');
 
+  O:=TFullCalendarOptions.New;
 
+  O.Events:=CreateEvents;
 
+  O.plugins:=['interaction', 'dayGrid', 'timeGrid','bootstrap'];
 
+  O.themeSystem:='bootstrap';
 
+  O.defaultView:='dayGridMonth';
 
+  O.header:=TCalendarHeaderFooterOptions.New;
 
+  O.header.center:='title';
 
+  O.header.left:='prev,next today';
 
+  O.header.right:='dayGridMonth,timeGridWeek,timeGridDay';
 
+  FCalendar:=TFullCalendar.new(FCalendarEl,O);
 
+  FCalendar.render;
 
+  ShowLocales;
 
+end;
 
+
 
+var
 
+  Application : TMyApplication;
 
+
 
+begin
 
+  Application:=TMyApplication.Create(nil);
 
+  Application.Initialize;
 
+  Application.Run;
 
+
 
+end.

+ 59 - 0
demo/fullcalendar/demofullcalendar5.html
View File 

@@ -0,0 +1,59 @@
 
+<!doctype html>
 
+<html lang="en">
 
+<head>
 
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
 
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
 
+
 
+  <!-- fullCalendar -->
 
+  <link href='https://unpkg.com/[email protected]/main.min.css' rel='stylesheet' />
 
+
 
+  <script src="https://code.jquery.com/jquery-3.4.1.js" ></script>
 
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
 
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script>
 
+  <!-- fullCalendar -->
 
+  <script src='https://unpkg.com/[email protected]/main.js'></script>
 
+
 
+   <style>
 
+
 
+    html, body {
 
+      margin: 0;
 
+      padding: 0;
 
+      font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
 
+      font-size: 14px;
 
+    }
 
+
 
+    #thecalendar {
 
+      max-width: 900px;
 
+      margin: 40px auto;
 
+    }
 
+
 
+  </style>
 
+  <title>FullCalendar.JS version 5 demo in Pas2JS</title>
 
+  <script src="demofullcalendar5.js"></script>
 
+</head>
 
+<body>
 
+  <div class="container-fluid">
 
+    <div class="row">
 
+      <form class="form form-inline ml-auto">
 
+        <div class="form-group">
 
+        <label for="locale-selector">Locales:</label>
 
+        <select class="form-control" id="locale-selector"></select>
 
+        </div>
 
+      </form>
 
+    </div>
 
+    <div id="thecalendar">
 
+    </div>
 
+   <div class="source row">
 
+     <div>
 
+       Created using &nbsp; <a target="_blank" href="https://wiki.freepascal.org/pas2js">pas2js.</a> &nbsp;&nbsp;Sources: &nbsp; 
+       <a target="new" href="demofullcalendar5.lpr">Program</a>.
 
+     </div>
 
+    </div>
 
+  </div>
 
+  <script>
 
+  window.addEventListener("load", rtl.run);
 
+  </script>
 
+</body>
 
+</html>

+ 91 - 0
demo/fullcalendar/demofullcalendar5.lpi
View File 

@@ -0,0 +1,91 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<CONFIG>
 
+  <ProjectOptions>
 
+    <Version Value="12"/>
 
+    <General>
 
+      <Flags>
 
+        <MainUnitHasCreateFormStatements Value="False"/>
 
+        <MainUnitHasTitleStatement Value="False"/>
 
+        <MainUnitHasScaledStatement Value="False"/>
 
+        <Runnable Value="False"/>
 
+      </Flags>
 
+      <SessionStorage Value="InProjectDir"/>
 
+      <Title Value="demofullcalendar5"/>
 
+      <UseAppBundle Value="False"/>
 
+      <ResourceType Value="res"/>
 
+    </General>
 
+    <CustomData Count="5">
 
+      <Item0 Name="MaintainHTML" Value="1"/>
 
+      <Item1 Name="PasJSHTMLFile" Value="project1.html"/>
 
+      <Item2 Name="PasJSPort" Value="0"/>
 
+      <Item3 Name="PasJSWebBrowserProject" Value="1"/>
 
+      <Item4 Name="RunAtReady" Value="1"/>
 
+    </CustomData>
 
+    <BuildModes>
 
+      <Item Name="Default" Default="True"/>
 
+    </BuildModes>
 
+    <PublishOptions>
 
+      <Version Value="2"/>
 
+      <UseFileFilters Value="True"/>
 
+    </PublishOptions>
 
+    <RunParams>
 
+      <FormatVersion Value="2"/>
 
+    </RunParams>
 
+    <Units>
 
+      <Unit>
 
+        <Filename Value="demofullcalendar5.lpr"/>
 
+        <IsPartOfProject Value="True"/>
 
+      </Unit>
 
+      <Unit>
 
+        <Filename Value="demofullcalendar5.html"/>
 
+        <IsPartOfProject Value="True"/>
 
+        <CustomData Count="1">
 
+          <Item0 Name="PasJSIsProjectHTMLFile" Value="1"/>
 
+        </CustomData>
 
+      </Unit>
 
+    </Units>
 
+  </ProjectOptions>
 
+  <CompilerOptions>
 
+    <Version Value="11"/>
 
+    <Target FileExt=".js">
 
+      <Filename Value="demofullcalendar5"/>
 
+    </Target>
 
+    <SearchPaths>
 
+      <IncludeFiles Value="$(ProjOutDir)"/>
 
+      <UnitOutputDirectory Value="js"/>
 
+    </SearchPaths>
 
+    <Parsing>
 
+      <SyntaxOptions>
 
+        <AllowLabel Value="False"/>
 
+        <CPPInline Value="False"/>
 
+        <UseAnsiStrings Value="False"/>
 
+      </SyntaxOptions>
 
+    </Parsing>
 
+    <CodeGeneration>
 
+      <TargetOS Value="browser"/>
 
+    </CodeGeneration>
 
+    <Linking>
 
+      <Debugging>
 
+        <GenerateDebugInfo Value="False"/>
 
+        <UseLineInfoUnit Value="False"/>
 
+      </Debugging>
 
+    </Linking>
 
+    <Other>
 
+      <CustomOptions Value="-Jeutf-8 -Jirtl.js -Jc -Jminclude"/>
 
+      <CompilerPath Value="$(pas2js)"/>
 
+    </Other>
 
+  </CompilerOptions>
 
+  <Debugging>
 
+    <Exceptions>
 
+      <Item>
 
+        <Name Value="EAbort"/>
 
+      </Item>
 
+      <Item>
 
+        <Name Value="ECodetoolError"/>
 
+      </Item>
 
+      <Item>
 
+        <Name Value="EFOpenError"/>
 
+      </Item>
 
+    </Exceptions>
 
+  </Debugging>
 
+</CONFIG>

+ 136 - 0
demo/fullcalendar/demofullcalendar5.lpr
View File 

@@ -0,0 +1,136 @@
 
+program demofullcalendar5;
 
+
 
+{$mode objfpc}
 
+
 
+uses
 
+  dateutils, browserapp, types, JS, Classes, SysUtils, Web, libjquery, libbootstrap, libfullcalendar5;
 
+
 
+type
 
+
 
+  { TMyApplication }
 
+
 
+  TMyApplication = class(TBrowserApplication)
 
+    FCalendarEl : TJSHTMLElement;
 
+    FCalendar : TFullCalendar;
 
+    procedure doRun; override;
 
+  private
 
+    function CreateEvents: TBaseCalendarEventArray;
 
+    procedure DoEventMount(Info: TCalendarEventRenderInfo);
 
+    procedure ShowLocales;
 
+  end;
 
+
 
+Function TMyApplication.CreateEvents : TBaseCalendarEventArray;
 
+
 
+Const
 
+  BuySell : Array[1..3] of string = ('Buy','Sell','Borrow');
 
+  Articles : Array[1..10] of String = ('books','sugar','coffee','apples','bananas','smartphone','bread','meat','cabbage','tomatoes');
 
+  Colors : Array[1..10] of string = ('silver','gray','salmon','plum','mediumpurple','slateblue','lime','seagreen','darkgreen','teal');
 
+
 
+Var
 
+  Ev,AllDay : Boolean;
 
+  D1,D2 : TDateTime;
 
+  E : TBaseCalendarEvent;
 
+  I : Integer;
 
+
 
+begin
 
+  SetLength(Result,62);
 
+  For I:=1 to 62 do
 
+    begin
 
+    D1:=Date-31+i;
 
+    if DayOfTheWeek(D1)=7 then
 
+     D1:=D1+1;
 
+    Ev:=(DayOfTheWeek(D1) mod 2=0);
 
+    allDay:=(I mod 5)=0;
 
+    if allDay then
 
+      D2:=D1
 
+    else
 
+      begin
 
+      D1:=IncHour(D1,9+Random(12));
 
+      D1:=IncMinute(D1,Random(12)*5);
 
+      D2:=IncMinute(D1,10*Random(20));
 
+      end;
 
+    E:=TBaseCalendarEvent.event(BuySell[1+Random(3)]+' '+Articles[1+Random(10)],D1,D2);
 
+    E.color:=Colors[1+Random(10)];
 
+    E.allDay:=allDay;
 
+    if not Assigned(E.extendedProps) then
 
+      E.extendedProps:=TJSObject.new;
 
+    E.extendedProps['description']:='A very long description to show that this event ('+BuySell[1+Random(3)]+' '+Articles[1+Random(10)]+') can also be put in a popup';
 
+    Result[I-1]:=E;
 
+    end;
 
+end;
 
+
 
+procedure TMyApplication.DoEventMount(Info: TCalendarEventRenderInfo);
 
+Var
 
+  opts : TBootstrapPopoverOptions;
 
+  T : String;
 
+begin
 
+  opts:=TBootstrapPopoverOptions.New;
 
+  opts.title:='Event details';
 
+  opts.content:=String(info.event.extendedProps.properties['description']);
 
+  opts.placement:='top';
 
+  opts.trigger:='hover';
 
+  opts.container:='body';
 
+  JQuery(info.el).popover(opts);
 
+
 
+end;
 
+
 
+procedure TMyApplication.ShowLocales;
 
+
 
+Var
 
+  Locales : TStringDynArray;
 
+  CB,O : TJSHTMLElement;
 
+  S : String;
 
+
 
+begin
 
+  CB:=GetHTMLElement('locale-selector');
 
+  Locales:=FCalendar.getAvailableLocaleCodes();
 
+  for S in Locales do
 
+    begin
 
+    O:=createHTMLElement('option');
 
+    O['value'] := S;
 
+    O.innerText :=S;
 
+    CB.appendChild(O);
 
+    end;
 
+  CB.addEventListener('change',TJSRawEventHandler (Procedure (Event: TJSEvent)
 
+    var v : String;
 
+    begin
 
+     V:=String(event.Target['value']);
 
+     if (V<>'') then
 
+       Fcalendar.setOption('locale',V);
 
+    end
 
+  ));
 
+end;
 
+
 
+
 
+procedure TMyApplication.doRun;
 
+
 
+Var
 
+  O : TFullCalendarOptions;
 
+
 
+begin
 
+  // Your code here
 
+  Terminate;
 
+  FCalendarEl:=GetHTMLElement('thecalendar');
 
+  O:=TFullCalendarOptions.New;
 
+  O.Events:=CreateEvents;
 
+//  O.plugins:=['interaction', 'dayGrid', 'timeGrid','bootstrap'];
 
+  O.themeSystem:='bootstrap';
 
+  O.initialView:='dayGridMonth';
 
+  O.headerToolbar:=TCalendarHeaderFooterOptions.New;
 
+  O.headerToolbar.center:='title';
 
+  O.headerToolbar.start:='prev,next today';
 
+  O.headerToolbar.end_:='dayGridMonth,timeGridWeek,timeGridDay';
 
+  O.eventDidMount:=@DoEventMount;
 
+  FCalendar:=TFullCalendar.new(FCalendarEl,O);
 
+  FCalendar.render;
 
+  ShowLocales;
 
+end;
 
+
 
+var
 
+  Application : TMyApplication;
 
+
 
+begin
 
+  Application:=TMyApplication.Create(nil);
 
+  Application.Initialize;
 
+  Application.Run;
 
+end.

+ 8 - 0
demo/fullcalendar/index.html
View File 

@@ -0,0 +1,8 @@
 
+<html>
 
+  <title>Choose fullcalendar version</title>
 
+  <body>
 
+    <h1>You must choose the FullCalendar version you wish to see:</h1>
 
+    <a href="demofullcalendar4.html">Version 4</a><p>
 
+    <a href="demofullcalendar5.html">Version 5</a><p>
 
+  </body>
 
+</html>