0

I am trying to embed a calendar from another website, but I don't really understand how. I tried the embed and script tags, nothing seems to work. Plus, I don't understand the JSON instructions at the end.

Go to https://www.crestinortodox.ro/embed/agendacrestinului/listacalendar/mycss/
and you can use this calendar on your webpage.
Use the 'callbackjs' parameter for JSON-P.

I know this may sound like a newbie question, but I don't really know what to do with that URL. I don't want to embed it as iframe, I want it to be included in the webpage code so I can make it responsive, add CSS and so on.

Here is a website that added the code and also created CSS for it: ww.bisericaicoanei.ro - on the right, where it says Calendar Ortodox.

Mr. Fontastic
  • 302
  • 1
  • 12
  • 1
    Use an ` – Wais Kamal Dec 14 '20 at 15:07
  • ifames are hard to make responsive and i want to avoid them because the content is dynamic. – Mr. Fontastic Dec 14 '20 at 15:08
  • 3
    Please show us your attempt. You may not be that far, or you could be completely wrong, we need to see where you stand exactly, "doesn't seem to work" isn't helping much (if it was working you probably wouldn't be here...) – Laurent S. Dec 14 '20 at 15:21
  • You may want to take a look at something like this: https://stackoverflow.com/questions/6132796/how-to-make-a-jsonp-request-from-javascript-without-jquery which will show you how to make a request and process JSON-P responses so you can embed the loaded content on your page. – Woodrow Dec 14 '20 at 15:42

1 Answers1

-1

You can use Cross Origin Resource Sharing to place a page's content in a div or any tag.
For example:

xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if(xhr.readyState == 4 && xhr.status == 200) {
    document.getElementById('displayDiv').innerHTML = xhr.responseText;
  }
};
xhr.open('GET', 'https://some.example.com', true);
xhr.send();

Then you need to set the Access-Control-Allow-Origin header in your server side code, for example in php:

<?php
  header('Access-Control-Allow-Origin: http://api.google.com');
  header('Access-Control-Allow-Origin: http://some.example.com');
?>

Check this answer out for more information: https://stackoverflow.com/a/41498465/11365636 OR
You can use the <enbed> element, for example:

<embed src="https://github.com/AbrarJahin/Asp.NetCore_3.1-PostGRE_Role Claim_Management/"
width=200
height=200
onerror="alert('URL invalid!');" />

OR
You can use the <object> element, for example:

<object data="https://github.com/AbrarJahin/Asp.NetCore_3.1-PostGRE_Role-Claim_Management/"
width="400"
height="300"
type="text/html">
    Alternative Content
</object>
Someone21
  • 91
  • 10
  • I did not vote it down. Thanks for your input, I'll try the code now. – Mr. Fontastic Dec 14 '20 at 16:13
  • I found this code in the source code of the page that already has the url embedded. I copied it to my website and it doesn't work. – Mr. Fontastic Dec 15 '20 at 13:39