Calendar adding in the app

[DogPlanner GSS]

Hello,

We want to add the calendar in our new app for pets which we are developing now using DroidScript app. 

Could anyone help us with this issue? 

We didn't find the info about this.

Thank you very much in advance.

[Fatih Elitas]

Hello.

I do this using the uiextras plugin

app.LoadPlugin( "UIExtras" );

function OnStart()
{
 lay = app.CreateLayout( "Linear", "VCenter,FillXY" );
 
 btn = app.CreateButton( "Pick Date", 0.3, 0.1 );
 btn.SetOnTouch( btn_OnTouch );
 lay.AddChild( btn );

 app.AddLayout( lay );

 uix = app.CreateUIExtras();
}

function btn_OnTouch()
{
 picker = uix.CreateDatePickerDialog( "Pick a Date" );
 picker.SetOnOk( picker_OnOk );
 picker.Show();
}

function picker_OnOk( year, month, day )
{
 var date = new Date();
 date.setFullYear( year, month, day);

 app.ShowPopup( date.toDateString() );
}

28 Kasım 2025 Cuma tarihinde saat 13:21:24 UTC+3 itibarıyla dogplan...@gmail.com şunları yazdı:

[DogPlanner GSS]

Dear Fatih,

Thank you very much for your answer! 

It is very useful for me and we will make my app with this plugin now!

We will use this functionality for selecting e.g. birth dates of our pets in the app (or another dates for remninders).

One more question about the calendar:

how can we display a calendar with months, weeks on the screen so that dates will be marked for clarity?

It would be interested to know if this can be done in JS rather then HTML.

Thank you very much in advance.

суббота, 29 ноября 2025 г. в 09:52:30 UTC+3, Fatih Elitas:

[Alan Hendry]

HI, 

are you using DatePicker or DatePickerDialog?

For the former 

SetTextColor("#ff0000") doesn't work

there are other methods.

SetBackColor("#ff0000") works

SetDividerColor, SetDescription, 

Not sure of parameter format for SetFirstDayOfWeek

Regards, Alan H

app.LoadPlugin( "UIExtras" )
var str, picker

function OnStart() {
 lay = app.CreateLayout( "Linear", "VCenter,FillXY" )

 uix = app.CreateUIExtras()
 picker = uix.CreateDatePicker( 2016, 0, 1, "Calendar" )
 picker.SetTextColor("#ff0000")
 picker.SetMinDate(2025,12,3)
 picker.SetMaxDate(2025,12,25)
 picker.SetOnDateChanged( OnDateChanged )
 
 picker.SetBackColor("#ff0000")
 picker.SetDividerColor("#ffff00")
 picker.SetDescription("Please pick a date")
 picker.SetPadding(5,19,15,20,"px")
 picker.SetFirstDayOfWeek(3)
 
 lay.AddChild( picker )
 
 app.AddLayout( lay )
 
 meta("Date Picker",picker)
 alert(str)
 
 alert(JSON.stringify(picker.plg))
 alert(JSON.stringify(picker.plg.data))
 alert(JSON.stringify(picker.data))
 
}

function OnDateChanged( year, month, day ) {

 var date = new Date()
 date.setFullYear( year, month, day)
 app.ShowPopup( date.toDateString() )
}

function meta (nme,object) {
    gbl = nme
    gopn = Object.getOwnPropertyNames(object)
    gopn = JSON.stringify(gopn)
    gopn = gopn.replace("[","")
    gopn = gopn.replace("]","")
    gopn = gopn.replace(/"/g,'')
    arr = gopn.split(",")
    arr.sort()
    arr.forEach(myFunction);
}    

function myFunction(item) {
   str+=item+"\n"+eval("picker."+item)+"\n\n"
}




//

[Alan Hendry]

P.S. CreateDatePicker, SetMinDate, SetMaxDate

use month 0 to 11.

 picker.SetMinDate(2025,11,3)
 picker.SetMaxDate(2025,11,25)

[DogPlanner GSS]

Dear Alan,

thank you very much for your answer! It works.

Have a nice day.

Best regards,

Dmitry

воскресенье, 14 декабря 2025 г. в 22:53:27 UTC+3, hendr...@gmail.com:

[DogPlanner GSS]

Dear Colleagues,

if you are interested in the native version of the calendar for DroidScript (not Hybrid) you can find it below. We do this using buttons array:

 app.LoadPlugin( "UIExtras" );

// Variables for calendar dimensions
var width = 0.13; // date cell width size
var height = 0.07; // date cell height size
var margin = 0; // Margin between date cells
var rows = 6; // Number of month lines
var columns = 7; // Number of month columns
// Array for current month dates
var datesArray = new Array(rows*columns+1);
var currentMonth = "";
var currentDay = new Date();
var btn = new Array(rows*columns+1);

// Array of cell dates
var buttons = [];

function OnStart() {

    uix = app.CreateUIExtras();

    //Add button to first tab.
    layDOGanizer = app.CreateLayout( "Linear", "Vertical");

    // First horizontal lines for Title text
    layHoriz = app.CreateLayout( "Linear", "Horizontal");
    layDOGanizer.AddChild( layHoriz );
   
    const today = new Date();
    currentDay = today;
 
    currentMonthDatesPositions( today );    
   
    txtTitle = app.CreateText( currentMonth );
    txtTitle.SetMargins(0.05, 0.05);
    txtTitle.SetTextSize( 20 );
    layHoriz.AddChild(txtTitle);
   
    txtYearTitle = app.CreateText( today.getFullYear() );
    txtYearTitle.SetMargins(0.05, 0.05);
    txtYearTitle.SetTextSize( 20 );
    layHoriz.AddChild(txtYearTitle);
   
    // Loop to create the date cell grid
    for (var row = 0; row < rows; row++) {

       // Horizontal new line
       layHoriz = app.CreateLayout( "Linear", "Horizontal");
       layDOGanizer.AddChild( layHoriz );
   
       // Vertical cells
       for (var col = 0; col < columns; col++) {
       
             let index = 1 + row * columns + col; // Calculating the index to access the array
             
             // Creating the button and adding to the buttons array
             btn[index] = app.CreateButton(datesArray[index], width, height);
             btn[index].SetTextSize( 11 );
             btn[index].SetMargins(0, margin);
             if ((col==5)||(col==6)) {
                btn[index].SetTextColor("red");
             } else {
                btn[index].SetTextColor("black");
             }
             if (datesArray[index]=="") {
                btn[index].SetBackColor("#E3F2FD");      
             } else {
                btn[index].SetBackColor("white");
             }
             btn[index].data = { index: index, customInfo: "Date: "+ row + ", " + col }; // Attach custom data
             btn[index].SetOnTouch(GenericButtonCallback); // Use a single callback function
             buttons.push(btn[index]);
         
             layHoriz.AddChild(btn[index]);
       }
    }
   
    // Horizontal new line
    layHoriz = app.CreateLayout( "Linear", "Horizontal");
    layDOGanizer.AddChild( layHoriz );
    btnBackMonth = app.CreateButton( "Back Month", 0.2, 0.1 );
    btnBackMonth.SetOnTouch( btnBackMonth_OnTouch );
    layHoriz.AddChild( btnBackMonth );
   
    btnPickDate = app.CreateButton( "Change year and month", 0.3, 0.1 );
    btnPickDate.SetOnTouch( btn_OnTouch );
    layHoriz.AddChild( btnPickDate );
   
    btnNextMonth = app.CreateButton( "Next Month", 0.2, 0.1 );
    btnNextMonth.SetOnTouch( btnNextMonth_OnTouch );
    layHoriz.AddChild( btnNextMonth );
   
    app.AddLayout( layDOGanizer );

}

function currentMonthDatesPositions( theDay ) {
 
    //today = new Date();
    const pastDate = new Date(theDay);
    let dayOfMonth = theDay.getDate();
    let dateCount=0;
   
    currentMonth = monthAsWord(theDay.getMonth());
    let monthMaxDays = defineMonthMaxDays();
   
    for(let icount = 1; icount < rows*columns+1; icount++) {
   
        //Calculating the first day of month
        pastDate.setDate(icount + pastDate.getDate() - dayOfMonth);
   
        //Finding the day of week for the date
        let dayOfWeek = pastDate.getDay();
        if( dayOfWeek == 0 ) {
            dayOfWeek = 7;  
        }
       
        //When first date
        if(icount==1) {
           
            for(let ifirstCount=0; ifirstCount<dayOfWeek; ifirstCount++) {
                datesArray[ifirstCount]="";
            }
            dateCount=dayOfWeek;
        }

        if(icount<=monthMaxDays) {            
            //Creating array with dates and values as days of weeks
            datesArray[dateCount] = icount;
        } else {
            datesArray[dateCount] = "";            
        }
       
        dateCount++;
    }
}

function newMonthDatesAssignment() {
   
   // Loop to create the button grid
   for (var row = 0; row < rows; row++) {    
    for (var col = 0; col < columns; col++) {
       
        let index = 1 + row * columns + col; // Calculating the index to access the array
             
        // Creating the button and adding to the buttons array
        btn[index].SetText(datesArray[index]);
        if ((col==5)||(col==6)) {
            btn[index].SetTextColor("red");
        } else {
            btn[index].SetTextColor("black");
        }
        if (datesArray[index]=="") {
            btn[index].SetBackColor("#E3F2FD");      
        } else {
            btn[index].SetBackColor("white");
        }

    }
   }
}

function defineMonthMaxDays() {
   
    let maxDays = 0;
   
    switch( currentMonth ) {
        case "January":
            maxDays = 31;
            break;
        case "February":
            maxDays = 28;
            break;            
        case "March":
            maxDays = 31;
            break;            
        case "April":
            maxDays = 30;
            break;
        case "May":
            maxDays = 31;
            break;            
        case "June":
            maxDays = 30;
            break;            
        case "July":
            maxDays = 31;
            break;            
        case "August":
            maxDays = 31;
            break;            
        case "September":
            maxDays = 30;
            break;
        case "October":
            maxDays = 31;
            break;            
        case "November":
            maxDays = 30;
            break;            
        case "December":
            maxDays = 31;
            break;        
    }
   
    return maxDays;
           
}

function monthAsWord( monthAsNum ) {

    let monthName = "";

    switch(monthAsNum) {
        case 0:
            monthName = "January";
            break;
        case 1:
            monthName = "February";
            break;
        case 2:
            monthName = "March";
            break;
        case 3:
            monthName = "April";
            break;
        case 4:
            monthName = "May";
            break;
        case 5:
            monthName = "June";
            break;
        case 6:
            monthName = "July";
            break;
        case 7:
            monthName = "August";
            break;
        case 8:
            monthName = "September";
            break;
        case 9:
            monthName = "October";
            break;
        case 10:
            monthName = "November";
            break;
        case 11:
            monthName = "December";
            break;
    }
   
    return monthName;
}

function btnBackMonth_OnTouch() {
   
    currentDay.setMonth(currentDay.getMonth() - 1);
    currentMonthDatesPositions( currentDay );  
    newMonthDatesAssignment();
   
    //Set title of Month and Year in the calendar
    txtTitle.SetText( currentMonth );
    txtYearTitle.SetText( currentDay.getFullYear() );
}

function btnNextMonth_OnTouch() {
     
    currentDay.setMonth(currentDay.getMonth() + 1);
    currentMonthDatesPositions( currentDay );  
    newMonthDatesAssignment();
   
    //Set title of Month and Year in the calendar
    txtTitle.SetText( currentMonth );
    txtYearTitle.SetText( currentDay.getFullYear() );

}

function btn_OnTouch() {
    picker = uix.CreateDatePickerDialog( "Pick a Date" );
    picker.SetOnOk( picker_OnOk );
 
    picker.Show();
}

function picker_OnOk( year, month, day ) {

    var date = new Date();

    date.setFullYear( year, month, day);
 
    currentDay = date;
    currentMonthDatesPositions( currentDay );  
    newMonthDatesAssignment();
   
    //Set title of Month and Year in the calendar
    txtTitle.SetText( currentMonth );
    txtYearTitle.SetText( currentDay.getFullYear() );
 
    app.ShowPopup( date.toDateString() );
}

// When button of the gameField was pushed
function GenericButtonCallback() {

    app.ShowPopup("Date: " + datesArray[this.data.index]);
     
    calendarRecordWindow();
   
}

function calendarRecordWindow() {
   
        var dlgCalend = app.CreateDialog("Event record");
        var calendarLay = app.CreateLayout("Linear", "VLeft");
        dlgCalend.SetSize( 0.8, 0.5 );
       
        EventType = app.CreateTextEdit( "Whats today: " );
        EventType.SetTextSize( 20 );
        EventTime = app.CreateTextEdit( "In what time: " );
        EventTime.SetTextSize( 20 );
        NotificationReminder = app.CreateTextEdit( "Reminder: " );
        NotificationReminder.SetTextSize( 20 );
        EventDescription = app.CreateTextEdit( "Comment: " );
        EventDescription.SetTextSize( 20 );
        layHoriz = app.CreateLayout( "Linear", "Horizontal");
       
        var eventSaveBtn = app.CreateButton("Save");
        var calendarEventCloseBtn = app.CreateButton("Close");
        calendarEventCloseBtn.SetOnTouch( function() {
           
                dlgCalend.Hide();
            });
     
        calendarLay.AddChild( EventType );
        calendarLay.AddChild( EventTime );
        calendarLay.AddChild( NotificationReminder );
        calendarLay.AddChild( EventDescription );
        layHoriz.AddChild( eventSaveBtn );
        layHoriz.AddChild( calendarEventCloseBtn );
        calendarLay.AddChild( layHoriz );          
        dlgCalend.AddLayout( calendarLay );
        dlgCalend.Show();      
}

We hope it will be useful:)

Have a nice day.

Best regards

Dmitry

понедельник, 15 декабря 2025 г. в 14:13:56 UTC+3, DogPlanner GSS: