The Microsoft Booking feature is not being shown in the iframe

https://i.sstatic.net/QYNGI.png

Instead of the booking website, this is what is being displayed.

Below is the code snippet:

index.js

import React from 'react'
const Appointment = () => {
    return (
    <iframe src='https://outlook.office365.com/owa/calendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0f7777774f77777721606162666c7d607c7b20687c6e">[email protected]</a>/bookings/' />
    )
}

export default Appointment

Your assistance would be highly appreciated. Thank you!

Answer №1

Please ensure to specify the height and width for the iframe element

import React from 'react'
const Appointment = () => {
    return (
    <iframe src='https://outlook.office365.com/owa/calendar/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99e1e1e1d9e1e1e1b7f6f7f4f0faebf6eaf6ffedb7faf6f4">[email protected]</a>/bookings/' height:'800px' width:'100%'
/>
 )
}

export default Appointment

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Strange CSS problem occurring specifically on Firefox and Opera browsers

I have set up sharing buttons on my website, but they appear distorted on Firefox and Opera browsers. Interestingly, they render perfectly on Chrome and even Internet Explorer. Here is a preview of how it currently looks: If you are using Firefox or Opera ...

Is it possible to override Material UI styles with css/scss?

Currently, I am using SCSS because it integrates well with NextJS. I find the SCSS module system easy to work with and would like to continue using it with Material-UI. However, Material-UI uses JSS which involves a lot of boilerplate code. I prefer not to ...

The drawbacks of Next.js do not appear to distinguish it from other server-side rendering frameworks

I am diving into SSR now and conducting research to guide my agency in choosing between Angular, React, or Vue as our primary F/E framework. It seems like React and Next are the frontrunners for us right now. I'm zeroing in on some drawbacks of using ...

What steps should I take to stop the accidental triggering of methods in an Unmounted class component?

I have been working on a React-Redux application that incorporates Google oauth2 login functionality. To manage the login and logout processes, I created a dedicated component called GoogleAuth. Usually, the GoogleAuth component is placed in the Header co ...

Storing form data in a file using React

I am trying to create a feature in my react component where instead of submitting a form and sending the data, I want to write this data to a file for later use. Is it achievable using vanilla JS or should I consider using a library? This is how my handl ...

Transforming ASCII Source Files into JPEG Images

I specialize in publishing technical books, available in print, PDF, and Kindle/MOBI formats, with EPUB coming soon. One challenge I have encountered is that the Kindle does not support monospace fonts, which are important for source code listings. The wo ...

A guide on retrieving information from a particular button element by using the onClick event handler and showing the information on a React webpage

Problem: I am attempting to retrieve data from a specific button component when clicked, but I am struggling to understand how to achieve this effectively. The button component that is rendered should be able to display its unique data on a page upon user ...

Extracting data from a tiered website within a specialized niche

I am currently attempting to scrape data from the webpage: "https://esco.ec.europa.eu/en/classification/skill_main". Specifically, I want to click on all the plus buttons under S-skills until no more plus buttons can be found, and then save the page source ...

Creating interactive buttons in Angular 2

I am currently in the process of coding my own website and I've run into an issue with a button. Here's the code I'm working with: <div *ngFor="let game of games" class=card"> <div class="card-body"> <h5 class="card-t ...

CSS: Overlapping two divs with unique classes and varying margins - Unexpected occurrence or intentional design?

One thing I'm curious about: Will the margins of two different divs merge if they have the same value when intersecting? It appears so! Do paddings not merge when two different divs intersect, even if they have the same value? It seems that way! When ...

Solving the Issue of Assigning a Random Background Color to a Dynamically Created Button from a Selection of Colors

Trying to create my own personal website through Kirby CMS has been both challenging and rewarding. One of the features I'm working on is a navigation menu that dynamically adds buttons for new pages added to the site. What I really want is for each b ...

Display item upon hovering and for an extended period upon clicking using jQuery

I am looking to create a functionality where hovering over an area displays item 2 for a certain duration, which is currently working fine with the existing code. However, I also want it to remain visible for a longer period if clicked, but this does not ...

Gather all script tags and place them into an array

Here is a sample markup that I need help with: <p><span style="color: blue;">Yes this one now</span></p> <p><br></p> <p>The main configuration value is this</p> <p><br></p> & ...

I'm having trouble getting my HTML POST request form to connect with the Express app.post. Any tips on how to properly pass on numeric variables to a different POST request?

There seems to be a misunderstanding or error on my part regarding POST and GET requests based on what I've read online. On myNumber.ejs, I have a submit form. Upon submission, the view switches to Add.ejs. The goal is for Add.ejs to display both the ...

Utilize multiple background images in CSS with a set of three unique images

I have inserted three images into the background of my website's body. Two of them are displaying correctly (one with repeat-y), but the third one is not working. I've tried searching a lot but couldn't find a solution. body { backgr ...

IE6/7 dilemma with CSS floating

Encountering a strange CSS float issue in IE6 and IE7. The HTML code looks like this: <fieldset style="float:left"> <legend>Summary</legend> <div class="display-label">Recruitment type</div> <div class="displa ...

Recreate the MUI paper background image

I'm currently integrating Material-UI into my NextJS project and I am wondering if there is a way to apply the paper background-image effect to other components as well. This would help me ensure consistency in color across different elements, especia ...

Is it feasible to integrate additional custom features on top of Material UI React components?

I have a general inquiry and don't have any code examples at the moment. I'm wondering if it's feasible before diving into it. For instance, let's say I plan to utilize MaterialUI's Table components instead of building them from s ...

CSS based on conditions for 2 specific divs

Hello, I am working on an HTML page where I need to apply CSS only if certain conditions are met. The div with the id "flipbook-page3-front" will always be present on this HTML page. Sometimes, another div with the id "pagesFlipbook" may also appear on t ...

How can one ensure the preservation of array values in React?

I'm struggling to mount a dynamic 'select' component in React due to an issue I encountered. Currently, I am using a 'for' loop to make API calls, but each iteration causes me to lose the previous values stored in the state. Is t ...