Making a Calendar in Vanilla Javascript

Making a Calendar in Vanilla Javascript

Arguably, time is the best and worst built-in function in Javascript. For my most recent project, I had the idea to make a bastardized Google calendars. I naively figured that making a general, functional calendar would be straightforward and allow me plenty of time to build out my site. I so was wrong.

Arguably, time is the best and worst built-in function in Javascript. For my most recent project, I had the idea to make a bastardized Google calendars. I naively figured that making a general, functional calendar would be straightforward and allow me plenty of time to build out my site. I so was wrong.

Where to Start?

Pretty early on, with guidance from my instructor, I decided to hard code a month into the HTML. This allowed me to build out the general structure and style I wanted for my calendar. There was conflicting literature on whether using or would be better practice. I ultimately decided to go with a table.

If you have ever taken the time to really study a month calendar, the structure is pretty simple. There is a header at the top, usually, that indicates the month and year. Below that are 7 columns outlining the individual days of the week. Finally, there is a maximum of 6 rows to populate the number of days for a given month.

Below is a snapshot of my hardcoded HTML.

Again, this allowed me to mess with the CSS style sheet to render the overall look and feel I wanted for my calendar.

Harnessing the Power of Time

Now came the hard part. I needed to use the built-in time function to populate the accurate number of days in a given month and year. After doing some research, I learned that Javascript will return a number that corresponds to a months relative index in a year: i.e. January is 0, February is 1, etc. This can be called using the getMonth() function built-in to Javascript.

Javascript also does the same thing with days of the week and starts with Sunday. That makes Sunday - 0, Monday - 1, etc. This is called using the getDay() function from Javascript.

So, the question became how do I use this two crucial pieces of information: 1. How do I figure out what day of the week is the start of the month? 2. How do I calculate how many days are in a month?

Answering the first questions was simple enough. Javascript literaturehelped outline the various options for built-in functions. Miraculously, new Date(year, month) is incredibly powerful and will automatically render the first day of a given year and month argument. Using the .getDay() function on this allowed me to get the day index for the start of the month.

Next, I needed to get the number of days in a given month. Again, I used the all-powerful new Date() to get me started, and using some high school algebra, I reverse engineered a way to calculate the total days. The new Date() function can accept a large number of arguments, down to the millisecond. I did not need to get granular with my calendar, but thought I could use the month, year and day arguments. Given that the maximum number of days in any month is 31, putting in 32 days into new Date()would give me the relative date that would actually be in the next month. For example, July(index 6 of a year) has 31 days in a month. If I entered new Date(2019, 6, 32) into my console, I would expect the console to return August 1, 2019.

The new Date() function also has a getDate() function that will return the day number from a given date. Using this returned number, I subtracted this from 32 to get the accurate number of days in a given month.

To further prove my concept, I used February 2019 in my console. Passing in 2019 for year, 1 for month, and 32 for days, I should expect the above equation to return 28, as there were 28 days in February 2019.

One hurdle down, now I had to use this data to populate and render my table.

Populating the Beast

After removing the hardcoded HTML data from my table, I needed to populate the month span and the year span with the currently rendered month and year. This was fairly straightforward as I left a majority of my HTML code in the header. After finding the individual span elements using document.findElementById(), I changed the textContent to the given monthand year.

After grabbing the table element, again using document.getElementById(), I then needed to add some for loops to render my rows and columns. I also knew that I would need to print the actual day number on the calendar. For obvious reasons, I started the count at 1 and assigned this 1 to a usable variable called renderNum. (Note: This variable will be incremented up by one with each column loop. But I’ll get to that in a bit)

Next, I generated the row for loop, as this was going to hold all the individual date tiles. (To be more proper, I will append my row with my table data elements.) Since I knew that I would need at maximum 6 rows, I started my for loop at the traditional 0 and had it stop when ireached 6. Seeing as there was no text content for the row, all I needed was to create the `````` element and assign this to a usable variable.

As stated before, I wanted to append each row with 7 table data elements. This meant that I needed a nested for loop. This 2nd for loop also started at 0 and ended when the count (c in this case) reached 7. This was simple enough, but the next step took some logical reasoning. Remembering that the new Date(month, year).getDay() gave me the index of day of the week, I needed to setup empty ``````s so that the count and calendar rendering started on the correct day. To do this, I added an if statement in my column for loop that would check if: 1. The loop was on the first row (aka i===0), and 2. The value of count loop was less than the new Date(month, year).getDay() value (aka c < startOfMonth).

If both those conditions were true, I wanted the loop to create a element, add an *empty* class to the newly rendered and append this to the current row element.

Next, I wanted to make sure that I was populating the correct day number on each one of the new table data elements. Modifying my empty td elementmethod, I added a `````` element for each new day, added the textContent, and appended the row. The textContent in this case would be the renderNum variable defined earlier. To make sure that the renderNum printed the correct date, I incremented the variable by 1.

Using the power of truthiness, I used an else if statement to stop the calendar from incrementing and adding data past the last day of the month.

Once I reached the break and was out of the for loops, I needed to make sure that to append the table body with the newly formed and populated row. (I did rearrange and group the code according to variables, and my personal preference. Obviously, this is not necessary. It was just a personal preference.)

Finally, I added EventListeners on the click of the arrows to toggle to the month before and after a calendar snapshot. Given the length of this post already, I will spare you. But there is plenty of literature on [EventListeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener "EventListeners")that I recommend reading if you have trouble with that step.

Below is a snapshot of the rendered calendar. I will be sure to update this post with the github link, once the project is complete.

Next up, appointments, time zones and scheduling. Wish me luck!

JavaScript Tutorial: if-else Statement in JavaScript

JavaScript Tutorial: if-else Statement in JavaScript

This JavaScript tutorial is a step by step guide on JavaScript If Else Statements. Learn how to use If Else in javascript and also JavaScript If Else Statements. if-else Statement in JavaScript. JavaScript's conditional statements: if; if-else; nested-if; if-else-if. These statements allow you to control the flow of your program's execution based upon conditions known only during run time.

Decision Making in programming is similar to decision making in real life. In programming also we face some situations where we want a certain block of code to be executed when some condition is fulfilled.
A programming language uses control statements to control the flow of execution of the program based on certain conditions. These are used to cause the flow of execution to advance and branch based on changes to the state of a program.

JavaScript’s conditional statements:

  • if
  • if-else
  • nested-if
  • if-else-if

These statements allow you to control the flow of your program’s execution based upon conditions known only during run time.

  • if: if statement is the most simple decision making statement. It is used to decide whether a certain statement or block of statements will be executed or not i.e if a certain condition is true then a block of statement is executed otherwise not.
    Syntax:
if(condition) 
{
   // Statements to execute if
   // condition is true
}

Here, condition after evaluation will be either true or false. if statement accepts boolean values – if the value is true then it will execute the block of statements under it.
If we do not provide the curly braces ‘{‘ and ‘}’ after if( condition ) then by default if statement will consider the immediate one statement to be inside its block. For example,

if(condition)
   statement1;
   statement2;

// Here if the condition is true, if block 
// will consider only statement1 to be inside 
// its block.

Flow chart:

Example:

<script type = "text/javaScript"> 

// JavaScript program to illustrate If statement 

var i = 10; 

if (i > 15) 
document.write("10 is less than 15"); 

// This statement will be executed 
// as if considers one statement by default 
document.write("I am Not in if"); 

< /script> 

Output:

I am Not in if
  • if-else: The if statement alone tells us that if a condition is true it will execute a block of statements and if the condition is false it won’t. But what if we want to do something else if the condition is false. Here comes the else statement. We can use the else statement with if statement to execute a block of code when the condition is false.
    Syntax:
if (condition)
{
    // Executes this block if
    // condition is true
}
else
{
    // Executes this block if
    // condition is false
}


Example:

<script type = "text/javaScript"> 

// JavaScript program to illustrate If-else statement 

var i = 10; 

if (i < 15) 
document.write("10 is less than 15"); 
else
document.write("I am Not in if"); 

< /script> 

Output:

i is smaller than 15
  • nested-if A nested if is an if statement that is the target of another if or else. Nested if statements means an if statement inside an if statement. Yes, JavaScript allows us to nest if statements within if statements. i.e, we can place an if statement inside another if statement.
    Syntax:
if (condition1) 
{
   // Executes when condition1 is true
   if (condition2) 
   {
      // Executes when condition2 is true
   }
}

Example:

<script type = "text/javaScript"> 

// JavaScript program to illustrate nested-if statement 

var i = 10; 

if (i == 10) { 

// First if statement 
if (i < 15) 
	document.write("i is smaller than 15"); 

// Nested - if statement 
// Will only be executed if statement above 
// it is true 
if (i < 12) 
	document.write("i is smaller than 12 too"); 
else
	document.write("i is greater than 15"); 
} 
< /script> 

Output:

i is smaller than 15
i is smaller than 12 too
  • if-else-if ladder Here, a user can decide among multiple options.The if statements are executed from the top down. As soon as one of the conditions controlling the if is true, the statement associated with that if is executed, and the rest of the ladder is bypassed. If none of the conditions is true, then the final else statement will be executed.
if (condition)
    statement;
else if (condition)
    statement;
.
.
else
    statement;


Example:

<script type = "text/javaScript"> 
// JavaScript program to illustrate nested-if statement 

var i = 20; 

if (i == 10) 
document.wrte("i is 10"); 
else if (i == 15) 
document.wrte("i is 15"); 
else if (i == 20) 
document.wrte("i is 20"); 
else
document.wrte("i is not present"); 
< /script> 

Output:

i is 20

How to Retrieve full Profile of LinkedIn User using Javascript

How to Retrieve full Profile of LinkedIn User using Javascript

I am trying to retrieve the full profile (especially job history and educational qualifications) of a linkedin user via the Javascript (Fetch LinkedIn Data Using JavaScript)

Here we are fetching LinkedIn data like Username, Email and other fields using JavaScript SDK.

Here we have 2 workarounds.

  1. Configuration of linkedIn developer api
  2. Javascript Code to fetch records

Configuration of linkedIn developer api

In order to fetch records, first we need to create developer api in linkedin which will act as token/identity while fetching data from other linkedin accounts.

So to create api, navigate to https://linkedin.com/developer/apps and click on 'Create Application'.

After navigating, fill in details like name, description and other required fields and then submit.

As we submit, it will create Client ID and Client Secret shown below, which we will be using in our code while communicating to fetch records from other LinkedIn account.

Note: We need to provide localhost Url here under Oauth 2.0. I am using my localhost, but you can probably use other production URLs under Oauth 2.0 where your app is configured. It will make your api  consider the Url as trusted which fetching records.

Javascript Code to fetch records

For getting user details like first name, last name,User image can be written as,

<script type="text/javascript" src="https://platform.linkedin.com/in.js">  
    api_key: XXXXXXX //Client ID  
    onLoad: OnLinkedInFrameworkLoad //Method that will be called on page load  
    authorize: true  
</script>  
<script type="text/javascript">  
    function OnLinkedInFrameworkLoad() {  
        IN.Event.on(IN, "auth", OnLinkedInAuth);  
    }  
  
    function OnLinkedInAuth() {  
        IN.API.Profile("me").result(ShowProfileData);  
    }  
  
    function ShowProfileData(profiles) {  
        var member = profiles.values[0];  
        var id = member.id;  
        var firstName = member.firstName;  
        var lastName = member.lastName;  
        var photo = member.pictureUrl;  
        var headline = member.headline;  
        //use information captured above  
        var stringToBind = "<p>First Name: " + firstName + " <p/><p> Last Name: " + lastName + "<p/><p>User ID: " + id + " and Head Line Provided: " + headline + "<p/>"  
        document.getElementById('profiles').innerHTML = stringToBind;  
    }  
</script>    

Kindly note we need to include 'https://platform.linkedin.com/in.js' as src under script type as it will act on this Javascript SDK provided by Linkedin.

In the same way we can also fetch records of any organization with the companyid as keyword.

<head>  
    <script type="text/javascript" src="https://platform.linkedin.com/in.js">  
        api_key: XXXXXXX ////Client ID  
        onLoad: onLinkedInLoad  
        authorize: true  
    </script>  
</head>  
  
<body>  
    <div id="displayUpdates"></div>  
    <script type="text/javascript">  
        function onLinkedInLoad() {  
            IN.Event.on(IN, "auth", onLinkedInAuth);  
            console.log("On auth");  
        }  
  
        function onLinkedInAuth() {  
            var cpnyID = XXXXX; //the Company ID for which we want updates  
            IN.API.Raw("/companies/" + cpnyID + "/updates?event-type=status-update&start=0&count=10&format=json").result(displayCompanyUpdates);  
            console.log("After auth");  
        }  
  
        function displayCompanyUpdates(result) {  
            var div = document.getElementById("displayUpdates");  
            var el = "<ul>";  
            var resValues = result.values;  
            for (var i in resValues) {  
                var share = resValues[i].updateContent.companyStatusUpdate.share;  
                var isContent = share.content;  
                var isTitled = isContent,  
                    isLinked = isContent,  
                    isDescription = isContent,  
                    isThumbnail = isContent,  
                    isComment = isContent;  
                if (isTitled) {  
                    var title = isContent.title;  
                } else {  
                    var title = "News headline";  
                }  
                var comment = share.comment;  
                if (isLinked) {  
                    var link = isContent.shortenedUrl;  
                } else {  
                    var link = "#";  
                }  
                if (isDescription) {  
                    var description = isContent.description;  
                } else {  
                    var description = "No description";  
                }  
                /* 
                if (isThumbnailz) { 
                var thumbnailUrl = isContent.thumbnailUrl; 
                } else { 
                var thumbnailUrl = "http://placehold.it/60x60"; 
                } 
                */  
                if (share) {  
                    var content = "<a target='_blank' href=" + link + ">" + comment + "</a><br>";  
                    //el += "<li><img src='" + thumbnailUrl + "' alt=''>" + content + "</li>";  
                    el += "<li><div>" + content + "</div></li>";  
                }  
                console.log(share);  
            }  
            el += "</ul>";  
            document.getElementById("displayUpdates").innerHTML = el;  
        }  
    </script>  
</body>  

We can get multiple metadata while fetching records for any any organization. We can get company updates as shown below.

Conclusion

We can also fetch any company specific data like company job updates/post, total likes, comments, and number of views along with a lot of metadata we can fetch which I have shown below.

Thank you for reading !

7 Best Javascript Iframe Libraries

7 Best Javascript Iframe Libraries

Iframes let you build user experiences into embeddable ‘cross-domain components’, which let users interact with other sites without being redirected. I have compiled 7 best Javascript iframe libraries.

Iframes let you build user experiences into embeddable ‘cross-domain components’, which let users interact with other sites without being redirected. I have compiled 7 best Javascript iframe libraries.

1. Zoid

A cross-domain component toolkit, supporting:

  • Render an iframe or popup on a different domain, and pass down props, including objects and functions
  • Call callbacks natively from the child window without worrying about post-messaging or cross-domain restrictions
  • Create and expose components to share functionality from your site to others!
  • Render your component directly as a React, Vue or Angular component!
    It's 'data-down, actions up' style components, but 100% cross-domain using iframes and popups!

Download


2. Postmate

Postmate is a promise-based API built on postMessage. It allows a parent page to speak with a child iFrame across origins with minimal effort.

Download


3. Iframe Resizer

Keep same and cross domain iFrames sized to their content with support for window/content resizing, in page links, nesting and multiple iFrames

Demo

Download


4. Iframely

Embed proxy. Supports over 1800 domains via custom parsers, oEmbed, Twitter Cards and Open Graph

Demo

Download


5. React Frame component

This component allows you to encapsulate your entire React application or per component in an iFrame.

Demo

Download


6. Seamless.js

A seamless iframe makes it so that visitors are unable to distinguish between content within the iframe and content beside the iframe. Seamless.js is a JavaScript library (with no dependencies) that makes working with iframes easy by doing all the seamless stuff for you automatically.

Demo

Download


7. Porthole

A proxy to safely communicate to cross-domain iframes in javascript

Demo

Download


Thank for read!