Sample javascript for a website.

[pvanthony]

Hi,

This is not an issue.

Would it be possible to share a sample javascript that uses the api? Like to show the "Year A" and The Saint. Or a website that we can learn how to use the api in javascript?

We would like to use it for the following website. http://www.iraivarthai.org/

[emagnier]

Hi Antony, thanks for your message! What do you mean by a javascript sample? And how you want to use romcal?

Actually romcal can be used:

• As a frontend library: the romcal library is loaded in the browser, and you can use it directly from your webpage.
• As a node.js module: romcal is also available as a dependency for a Node.js project.

For more details, you can take a look at the main romcal repo, and more precisely here for the usages: https://github.com/romcal/romcal#usage- For a browser usage, after you made a npm install romcal in your project, the browser library is located in the dist folder. You also have a sample index.html (at the root of the romcal project) you can load on your browser to start to play with romcal (take a look at the browser console).

If you want to consume romcal data via a Rest API (which is the goal of the current repo: romcal-api), you will need to host romcal-api on a Node.js server (or include it on an existing node.js project), so then you can access the Rest API frontend or backend side. But this new method is still in early stage and not ready yet for production.

Also we plan to improve documentation, add sample usage examples, and create a website for this project. In the meantime, your feedback and questions are always welcome!

[pvanthony]

On 24/1/20 3:27 am, Etienne Magnier wrote:

What do you mean by a javascript sample? And how you want to use romcal?

Thank you for replying.

We want to use romcal on a website for Tamil, Sri Lankan and English with daily scripture readings and saint of the day.

The Franciscan Friar, Julian Roy, has done the audio recording for Tamil and Sri Lankan scriptures as well as the saint of the day.

Currently he is changing daily the links to the recordings scriptures. As for the saint of the day, that has been automated using php by getting NOW() of the server and pointing to the correct audio file.

Hoping to get the NOW() of the browser using javascript so that it will be the correct date time anywhere in the world.

We are hoping to automate the scriptures readings as well using romcal.

We are not good at javascript, that is why we requested for a sample html page with the javascript that shows the today's Year like Year A, or Year B or Year C and the day like Second ordinary Sunday.

Actually romcal can be used:

• As a frontend library: the romcal library is loaded in the browser, and you can use it directly from your webpage.
• As a node.js module: romcal is also available as a dependency for a Node.js project.

Which would you recommend using for our use case? Frontend romcal library that is loaded in the browser or node.js? I am guessing frontend library.

For more details, you can take a look at the main romcal https://github.com/romcal/romcal repo, and more precisely here for the usages: https://github.com/romcal/romcal#usage- For a browser usage, after you made a |npm install romcal| in your project, the browser library is located in the |dist| folder. You also have a sample |index.html| (at the root of the romcal project) you can load on your browser to start to play with romcal (take a look at the browser console).

I will check it out. Thank you for the link.

If you want to consume romcal data via a Rest API (which is the goal of the current repo: romcal-api https://github.com/romcal/romcal-api), you will need to host |romcal-api| on a Node.js server (or include it on an existing node.js project), so then you can access the Rest API frontend or backend side. But this new method is still in early stage and not ready yet for production.

Also we plan to improve documentation, add sample usage examples, and create a website for this project. In the meantime, your feedback and questions are always welcome!

Cool. I will watch this project.

Once again thank you for sharing this project.

P.V.Anthony

[pvanthony]

I tried your advice about frontend library. It looks the right way to go. Thank you again for helping.

[emagnier]

You are welcome!

Thanks for sharing a bit about your project. Yes the frontend library might be useful for your needs.

[tukusejssirs]

We want to use romcal on a website for Tamil, Sri Lankan and English with daily scripture readings and saint of the day.

@pvanthony, sorry to be off topic(a bit), but if you want to output the saint (or celebration) of the day, don’t you want to contribute the translations of the celebration names and check the Sri Lankan calendar for any errors? I could guide you if you want (we would create a new issue in the romcal repo.

[pvanthony]

I have checked with the Julian Friar and he said the data is correct for Sri Lanka. We will check again more deeply later.

Currently we are trying to figure out how to store the audio files. Thinking of something like Celebration Types > Liturgical Seasons > Sunday Cycle | Ferial Cycle > or Liturgical Seasons > Celebration Types > Sunday Cycle | Ferial Cycle >

Any advice?

[tukusejssirs]

Currently we are trying to figure out how to store the audio files. Thinking of something like Celebration Types > Liturgical Seasons > Sunday Cycle | Ferial Cycle > or Liturgical Seasons > Celebration Types > Sunday Cycle | Ferial Cycle >

I presume you talk about folders.

I think you could use the romcal celebration keys. Most of them you can find here (e.g. the key of ‘All Saints’ is allSaints); the rest are the feria and Sunday names which you can either compute or get them from the romcal JSON output. They are unique, therefore you should not need any other folders, but you could separate them into folders with the name of seasons.

@emagnier, any thoughts on this?

[pvanthony]

Thank you for the advice. Here is the issue that I am getting for naming the audio files. Let's take an example of my patron saint, St. Anthony of Padua. His day is 13th of June. In 2020 his day falls on Saturday. Romcal calls the day Liturgical Day: Saint Anthony of Padua, Priest and Doctor. I was hoping that the day would be called Saturday of the 10 week of Ordinary Time. This way the audio file will reflect the reading of the day and pick the correct audio file.

In 2021 his day falls on Sunday. Romcal does call the day Liturgical Day: 11 Sunday of Ordinary Time. This is great because the audio file can be named that and it will pickup the correct audio file. For Sunday, we will have Year A B C so I can have folders named A, B and C.

For feria days, I can have folders odd and even.

If the liturgical days with memorial and named by a saint name, I just cannot figure out how to store the audio files. Am I missing some setting in romcal?

Please continue to advice.

Here is the website that I do the testing. http://romcal.sound.sg Please note that I am not a programmer so the code is ugly but seems to work.

[tukusejssirs]

Well, I still don’t really get it what is the problem you have.

As I have already said, you could use the localisation keys (you can find the list of the keys here; for example, a key for the St Anthody of Padua is saintAnthonyOfPaduaPriestAndDoctor).

The problem might occur when there are only optional memorials on particular day, because currently, romcal won’t show the ferias on such days. However, this can be circumwent: you need to check if the celebration of a day is an optional memorial; if it is, you need to show additional celebration, a celebration of a feria on such day. The harder part is that you need to get the ferial week number of that week and the week day (i.e. Monday through Saturday) to get the name of the feria.

We plan to fix this, but there is no ETA yet.

Anyway, I suggest against naming the audio files using the name of celebration (e.g. Saint Anthony of Padua, Priest and Doctor.mp3), because when you localise the celebration names into other languages (like you want them displayed also in Tamil and Sri Lankan), those names will be different. On the other side, the localisation keys won’t change (although this might change in romcal v2.0.0, but that is a future).

[emagnier]

Hey Antony,

The issue you have is now fixed in this PR: #162 (not merged & released yet).

Thanks to this patch, you will always be able to get the corresponding feria on any celebrations : any celebration object that is not itself a feria or a Sunday (for example a memory...) will have a new base property that refers to the original feria of the day, before a new celebration replaces the original feria.

So you will be able to get the key of the feria for every day, even if returned object by romcal isn't a feria, like a memory for example (or anything else).

Also, on days that contain only 1 or more optional memories, romcal will return all the possible celebrations for that day, including the feria.

This patch might not be released soon on the stable branch, however, if it's something urgent on your project, you might be able to get it quickly from our alpha release channel. I'll let you know as soon as it's available (within a few days, probably very quickly).

---

We also plan to add more metadata for all celebrations (like the current week in s season, the feria cycle ...). So you will get data with more accuracy. But I don't have ETA. So the workaround I suggest above might be the best solution for now.

[pvanthony]

Thank you. Thank you. Thank you. This will be very very very useful. Once again thank you both for helping out. I really do appreciate it.

[pvanthony]

This patch might not be released soon on the stable branch, however, if it's something urgent on your project, you might be able to get it quickly from our alpha release channel. I'll let you know as soon as it's available (within a few days, probably very quickly).

If the new code has been merged into the alpha release, can I do a git clone this weekend.

If not ready, then I will try next week.

[emagnier]

Absolutely!

I'll recommend that you get it with npm instead:

npm install romcal@1.3.1-alpha.4

Then in your working repo, the library will be in node_modules/romcal/dist/romcal.bundle.min.js

Please also note that this patch has been released in our dev channel. Even if the codebase is stable, it might contain bugs.

[emagnier]

And from this last version, when the DateItem object isn't a feria you will be able to get the original feria from the base.key property. Note that this property isn't available when the DateItem object itself is already a feria or a sunday (the object type is available in the type property of the object).

Also if there is multiple celebrations falling the same day (optional memories and the feria), the feria object always come first in the array of returned DateItem.

[pvanthony]

I need help with retrieving data using the current date. Here is how I used to do it but now it does not work. Maybe I did it the wrong way from the start. Please bear with me as I am not a programmer.

      // the current code. Working with stable romcal.
      // looking for advice on how to query on alpha romcal
      var today = new Date();
      var currentYear = today.getFullYear();
      var currentMonth = today.getMonth();
      var currentDay = today.getDate();

      // If your locale is supported by Romcal, it will use it.
      // If not, it will default to 'en'.
      var currentLocale = navigator.language || navigator.userLanguage;

      var dates = Romcal.calendarFor({
          year: currentYear,
          locale: currentLocale,
          christmastideEnds: 'o',
          epiphanyOnJan6: false,
          christmastideIncludesTheSeasonOfEpiphany: true,
          corpusChristiOnThursday: false,
          ascensionOnSunday: false,
          type: 'calendar' // liturgical | calendar
      });

      var result = Romcal.queryFor(dates, {
          month: currentMonth
      });

      console.log("Liturgical Day: " + result[currentDay].name);
      console.log("Liturgical Year: " + result[currentDay].data.meta.cycle.value);
      console.log("Liturgical Seasons: " + result[currentDay].data.season.key);
      console.log("Celebration Type: " + result[currentDay].type);
      console.log("Celebration Titles : " + result[currentDay].data.meta.titles[0]);
      console.log("Psalter Week: " + result[currentDay].data.meta.psalterWeek.value);
      console.log("Liturgical Color: " + result[currentDay].data.meta.liturgicalColor.key);

[tukusejssirs]

I have no idea why it does not work for you. It works for me.

---

1. Install romcal via npm. It installs romcal and all its dependencies into currect working directory, therefore it might be a good idea to create a new (empty) folder for this.

npm install romcal@1.3.1-alpha.4

2. Then, create the following file in the same directory you issued the previous command. This file is based on index.html from romcal repo and you code (without any modification).

index.html

```html

Romcal

Open your console to view calendar output ```

3. Open the index.html in the web browser

4. In the broswer console, you should see something like this:

[pvanthony]

I did not explain clearly. My bad.

Checkout the following code for the date 2020-06-13. I think I am using the wrong "key". Hope I am using the correct term. Because the "key" does not correspond to the date. It shows the wrong information. I need advice on how to write the code to get the correct data for the day.

I ask this because I know I am doing it the wrong way. Because the data is there when I do a query group by month according to the documentation. I am not a programmer. :-(

// set date for checking. 
           var currentYear = 2020;
              var currentMonth = 06;
              var currentDay = 13;
              var today = new Date(currentYear, currentMonth-1, currentDay);
              console.log(today);
      var currentYear = today.getFullYear();
      var currentMonth = today.getMonth();
      var currentDay = today.getDate();

      // If your locale is supported by Romcal, it will use it.
      // If not, it will default to 'en'.
      var currentLocale = navigator.language || navigator.userLanguage;

      var dates = Romcal.calendarFor({
          year: currentYear,
          locale: currentLocale,
          christmastideEnds: 'o',
          epiphanyOnJan6: false,
          christmastideIncludesTheSeasonOfEpiphany: true,
          corpusChristiOnThursday: false,
          ascensionOnSunday: false,
          type: 'calendar' // liturgical | calendar
      });

      var result = Romcal.queryFor(dates, {
          month: currentMonth
      });

      console.log("Liturgical Day: " + result[currentDay].name);
      console.log("Liturgical Year: " + result[currentDay].data.meta.cycle.value);
      console.log("Liturgical Seasons: " + result[currentDay].data.season.key);
      console.log("Celebration Type: " + result[currentDay].type);
      console.log("Celebration Titles : " + result[currentDay].data.meta.titles[0]);
      console.log("Psalter Week: " + result[currentDay].data.meta.psalterWeek.value);
      console.log("Liturgical Color: " + result[currentDay].data.meta.liturgicalColor.key);

[tukusejssirs]

There are two problems.

1. The problem lays in how JavaScript indexes the array. As in most programming languages, first element in an array has index 0. But the first element in results array is 1 June 2020, i.e. the day of month is 1 which does not equal to 0 (the index of the first element).

2. The other problem is that for one day, there might be more than one celebration. For example, on 2 June 2020, there can be feria or Sts Marcellinus and Peter, martyrs, celebrated. What does this mean? The feria has one index i (in June 2020 it is 1) and the celebration of those martyrs has index i+1 (in June 2020 it is 2). This further misaligns the array index number from the day of month number.

---

You can see this if you add the following line of code somewhere after results variable definition. Then open the browser console and click on the little arraw (in form of a triangle or a play symbol) besides the June.

console.log('June', result);

---

Though @emagnier might come up with a better solution, I have come up with the following one: check the date of the celebration item and compare it with the today; if they are equal, output the relevant information. I know that this might be a bit slower.

// If your locale is supported by romcal, it will use it, otherwise it will default to 'en'.
var currentLocale = navigator.language || navigator.userLanguage;

// Set the date
// var today = new Date();
// var currentYear = today.getFullYear();
// var currentMonth = today.getMonth();
// var currentDay = today.getDate();
var currentYear = 2020;
var currentMonth = 5;  // 0 = Jan; 11 = Dec
var currentDay = 13;
var today = new Date(currentYear, currentMonth, currentDay);

// Remove hours, minutes, seconds and milliseconds
today.setHours(0, 0, 0, 0);

var dates = Romcal.calendarFor({
  year: currentYear,
  locale: currentLocale,
  christmastideEnds: 'o',
  epiphanyOnJan6: false,
  christmastideIncludesTheSeasonOfEpiphany: true,
  corpusChristiOnThursday: false,
  ascensionOnSunday: false,
  type: 'calendar' // liturgical | calendar
});

var dates = Romcal.calendarFor({
  locale: currentLocale,
  year: currentYear
});

var result = Romcal.queryFor(dates, {
  month: currentMonth
});

for (var i=0; i < result.length; i++) {
  var tempDate = new Date(result[i].date);

  // The `+` here converts the value after it to the number of seconds since the Epoch
  if (+tempDate == +today) {
    console.log("Liturgical Day: " + result[i].name);
    console.log("Liturgical Year: " + result[i].data.meta.cycle.value);
    console.log("Liturgical Seasons: " + result[i].data.season.key);
    console.log("Celebration Type: " + result[i].type);
    console.log("Celebration Titles : " + result[i].data.meta.titles[0]);
    console.log("Psalter Week: " + result[i].data.meta.psalterWeek.value);
    console.log("Liturgical Color: " + result[i].data.meta.liturgicalColor.key);
  }
}

/cc @emagnier & @pejulian: Should we not have an option to query exact date (day of month) beside the day of week?

[pvanthony]

Thank you for the code example. In Singapore I needed to add the following to make it work. Got the code from google search.

To be added just before "for (var i=0; ........."

today = today - today.getTimezoneOffset() * 60000;

I hope this is the correct thing to do.

[tukusejssirs]

Indeed. The dates in romcal are in UTC/GMT/Zulu time (+00:00), therefore you always need to match the timezones. :smiley: